fix: ComboBox item actions should not be selectable (#8947)

* fix: ComboBox item actions should not be selectable

* Add placeholder to example

Author: devongovett

packages/@react-aria/combobox/src/useComboBox.ts

@@ -16,7 +16,7 @@ import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
 import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared';
-import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
+import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {dispatchVirtualFocus} from '@react-aria/focus';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -354,6 +354,10 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     }
   }, [focusedItem]);
 
+  useEvent(listBoxRef, 'react-aria-item-action', state.isOpen ? () => {
+    state.close();
+  } : undefined);
+
   return {
     labelProps,
     buttonProps: {
@@ -383,7 +387,8 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
       shouldUseVirtualFocus: true,
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true,
-      linkBehavior: 'selection' as const
+      linkBehavior: 'selection' as const,
+      ['UNSTABLE_itemBehavior']: 'action'
     }),
     descriptionProps,
     errorMessageProps,

packages/@react-aria/listbox/src/useListBox.ts

@@ -100,7 +100,9 @@ export function useListBox<T>(props: AriaListBoxOptions<T>, state: ListState<T>,
     shouldFocusOnHover: props.shouldFocusOnHover,
     isVirtualized: props.isVirtualized,
     onAction: props.onAction,
-    linkBehavior
+    linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: props['UNSTABLE_itemBehavior']
   });
 
   let {labelProps, fieldProps} = useLabel({

packages/@react-aria/listbox/src/useOption.ts

@@ -137,6 +137,8 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
     isDisabled,
     onAction: onAction || item?.props?.onAction ? chain(item?.props?.onAction, onAction) : undefined,
     linkBehavior: data?.linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: data?.['UNSTABLE_itemBehavior'],
     id
   });
 

packages/@react-aria/selection/src/useSelectableItem.ts

@@ -205,8 +205,9 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
   // With touch, onAction occurs on single tap, and long press enters selection mode.
   let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';
+  let isActionOverride = onAction && options['UNSTABLE_itemBehavior'] === 'action';
   let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';
-  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;
+  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride && !isActionOverride;
   let allowsActions = (onAction || hasLinkAction) && !isDisabled;
   let hasPrimaryAction = allowsActions && (
     manager.selectionBehavior === 'replace'
@@ -225,6 +226,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   let performAction = (e) => {
     if (onAction) {
       onAction();
+      ref.current?.dispatchEvent(new CustomEvent('react-aria-item-action', {bubbles: true}));
     }
 
     if (hasLinkAction && ref.current) {

packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

@@ -318,6 +318,7 @@ export function WithCreateOption() {
   return (
     <ComboBox
       label="Favorite Animal"
+      placeholder="Select an animal"
       inputValue={inputValue}
       onInputChange={setInputValue}>
       {inputValue.length > 0 && (

packages/react-aria-components/test/ComboBox.test.js

@@ -409,7 +409,7 @@ describe('ComboBox', () => {
     expect(options[0]).toHaveTextContent('No results');
   });
 
-  it('should support onAction', async () => {
+  it.each(['keyboard', 'mouse'])('should support onAction with %s', async (interactionType) => {
     let onAction = jest.fn();
     function WithCreateOption() {
       let [inputValue, setInputValue] = useState('');
@@ -457,8 +457,29 @@ describe('ComboBox', () => {
     expect(options).toHaveLength(1);
     expect(options[0]).toHaveTextContent('Create "L"');
 
-    await user.keyboard('{ArrowDown}{Enter}');
+    if (interactionType === 'keyboard') {
+      await user.keyboard('{ArrowDown}{Enter}');
+    } else {
+      await user.click(options[0]);
+    }
     expect(onAction).toHaveBeenCalledTimes(1);
     expect(comboboxTester.combobox).toHaveValue('');
+    
+    // Repeat with an option selected.
+    await comboboxTester.selectOption({option: 'Cat'});
+
+    await user.keyboard('s');
+
+    options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('Create "Cats"');
+
+    if (interactionType === 'keyboard') {
+      await user.keyboard('{ArrowDown}{Enter}');
+    } else {
+      await user.click(options[0]);
+    }
+    expect(onAction).toHaveBeenCalledTimes(2);
+    expect(comboboxTester.combobox).toHaveValue('Cat');
   });
 });