TagGroup onAction

[onx2]

Provide a general summary of the issue here

The TagGroup omits onAction, meaning the group can't be used as an implementation of the layout grid pattern + selectionMode="none"

🤔 Expected Behavior?

I'd like to use the onAction in TagGroup, similar to the onRemove so these tags can be actionable, rather than selectable. This makes sense to be because that functionality already exists for links and onAction seems to work even though it isn't typed? 🤔

😯 Current Behavior

The TagGroup doesn't expose onAction in the types like onRemove, so despite it working it fails tsc.

💁 Possible Solution

Expose onAction as it seems to work?

🔦 Context

No response

🖥️ Steps to Reproduce

This repo shows selectionMode="none" and interacting with the tags works with onAction: https://codesandbox.io/p/sandbox/react-aria-components-template-g7wmmk

Version

Latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[onx2]

I think the type def might just need updating? It doesn't pick out the onAction, and is also picking the escapeKeyBehavior then redefining it with the same definition.

I can make this change if the team feels this is the right solution:

from:

export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior'>, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
    /** How multiple selection should behave in the collection. */
    selectionBehavior?: SelectionBehavior;
    /** Whether selection should occur on press up instead of press down. */
    shouldSelectOnPressUp?: boolean;
    /** Handler that is called when a user deletes a tag.  */
    onRemove?: (keys: Set<Key>) => void;
    /** An error message for the field. */
    errorMessage?: ReactNode;
    /**
     * Whether pressing the escape key should clear selection in the TagGroup or not.
     *
     * Most experiences should not modify this option as it eliminates a keyboard user's ability to
     * easily clear selection. Only use if the escape key is being handled externally or should not
     * trigger selection clearing contextually.
     * @default 'clearSelection'
     */
    escapeKeyBehavior?: 'clearSelection' | 'none';
}

to:

export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, Pick<AriaGridListProps<T>, 'escapeKeyBehavior' | "onAction">, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
    /** How multiple selection should behave in the collection. */
    selectionBehavior?: SelectionBehavior;
    /** Whether selection should occur on press up instead of press down. */
    shouldSelectOnPressUp?: boolean;
    /** Handler that is called when a user deletes a tag.  */
    onRemove?: (keys: Set<Key>) => void;
    /** An error message for the field. */
    errorMessage?: ReactNode;
}

[snowystinger]

I don't recall any particular reason why the onAction would be omitted.

As for the Pick and then override, that's just to make sure that the type matches but the jsdoc can be altered to make more sense for the specific component. That jsdoc is what appears in our documentation site as well.

[onx2]

It could be as simple as it was just forgotten in the types 🤷🏼. I can open a PR to only add onAction to the pick union instead of the larger change I suggested - would that work?

I'm doing this for now to make tsc happy, but onAction works when testing in storybook.

// @ts-expect-error - https://github.com/adobe/react-spectrum/issues/9205
onAction={onAction}