fix: Fix onAction with keyboard in ComboBox and add docs (#8910)

devongovett · web-flow · commit a0e8ea0ce307 · 2025-09-24T17:42:36.000Z
* fix: Fix onAction with keyboard in ComboBox and add docs

* Fix old React
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -139,19 +139,22 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
         }
 
         // If the focused item is a link, trigger opening it. Items that are links are not selectable.
-        if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
-          let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
-          if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
-            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
-            if (collectionItem) {
+        if (state.isOpen && listBoxRef.current && state.selectionManager.focusedKey != null) {
+          let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+          if (collectionItem?.props.href) {
+            let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+            if (e.key === 'Enter' && item instanceof HTMLAnchorElement) {
               router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);
             }
+            state.close();
+            break;
+          } else if (collectionItem?.props.onAction) {
+            collectionItem.props.onAction();
+            state.close();
+            break;
           }
-
-          state.close();
-        } else {
-          state.commit();
         }
+        state.commit();
         break;
       case 'Escape':
         if (
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -399,7 +399,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
                   }
                 }]
               ]}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {!isLink && !props.onAction && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
             </Provider>
           </>
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -16,7 +16,7 @@ import {ComboBoxProps} from 'react-aria-components';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
-import {ReactElement} from 'react';
+import {ReactElement, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 import {useAsyncList} from 'react-stately';
 
@@ -307,3 +307,26 @@ export const EmptyCombobox: Story = {
     }
   }
 };
+
+export function WithCreateOption() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('hi')}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
@@ -232,6 +232,42 @@ function ControlledComboBox() {
 }
 ```
 
+## Item actions
+
+Use the `onAction` prop on a `<ListBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.
+
+```tsx render
+"use client";
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+import {useState} from 'react';
+
+function Example() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      allowsEmptyCollection
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {/*- begin highlight -*/}
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      {/*- end highlight -*/}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}
+```
+
 ## Forms
 
 Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects a value, or implement custom client or server-side validation. See the Forms guide to learn more.
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -164,6 +164,41 @@ function Example() {
 }
 ```
 
+### Actions
+
+Use the `onAction` prop on a `<ComboBoxItem>` to perform a custom action when the item is selected. This example adds a "Create" action for the current input value.
+
+```tsx render
+"use client";
+import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
+import {useState} from 'react';
+
+function Example() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      label="Favorite Animal"
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      {/*- begin highlight -*/}
+      {inputValue.length > 0 && (
+        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
+          {`Create "${inputValue}"`}
+        </ComboBoxItem>
+      )}
+      {/*- end highlight -*/}
+      <ComboBoxItem>Aardvark</ComboBoxItem>
+      <ComboBoxItem>Cat</ComboBoxItem>
+      <ComboBoxItem>Dog</ComboBoxItem>
+      <ComboBoxItem>Kangaroo</ComboBoxItem>
+      <ComboBoxItem>Panda</ComboBoxItem>
+      <ComboBoxItem>Snake</ComboBoxItem>
+    </ComboBox>
+  );
+}
+```
+
 ### Links
 
 Use the `href` prop on a `<ComboBoxItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link items in a `ComboBox` are not selectable.
diff --git a/packages/react-aria-components/stories/ComboBox.stories.tsx b/packages/react-aria-components/stories/ComboBox.stories.tsx
@@ -331,3 +331,39 @@ const MyListBoxLoaderIndicator = (props) => {
     </ListBoxLoadMoreItem>
   );
 };
+
+export function WithCreateOption() {
+  let [inputValue, setInputValue] = useState('');
+
+  return (
+    <ComboBox
+      allowsEmptyCollection
+      inputValue={inputValue}
+      onInputChange={setInputValue}>
+      <Label style={{display: 'block'}}>Favorite Animal</Label>
+      <div style={{display: 'flex'}}>
+        <Input />
+        <Button>
+          <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+        </Button>
+      </div>
+      <Popover placement="bottom end">
+        <ListBox
+          data-testid="combo-box-list-box"
+          className={styles.menu}>
+          {inputValue.length > 0 && (
+            <MyListBoxItem onAction={() => alert('hi')}>
+              {`Create "${inputValue}"`}
+            </MyListBoxItem>
+          )}
+          <MyListBoxItem>Aardvark</MyListBoxItem>
+          <MyListBoxItem>Cat</MyListBoxItem>
+          <MyListBoxItem>Dog</MyListBoxItem>
+          <MyListBoxItem>Kangaroo</MyListBoxItem>
+          <MyListBoxItem>Panda</MyListBoxItem>
+          <MyListBoxItem>Snake</MyListBoxItem>
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  );
+}
diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js
@@ -13,7 +13,7 @@
 import {act} from '@testing-library/react';
 import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, ListLayout, Popover, Text, Virtualizer} from '../';
 import {fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
-import React from 'react';
+import React, {useState} from 'react';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
@@ -408,4 +408,57 @@ describe('ComboBox', () => {
     expect(comboboxTester.listbox).toBeTruthy();
     expect(options[0]).toHaveTextContent('No results');
   });
+
+  it('should support onAction', async () => {
+    let onAction = jest.fn();
+    function WithCreateOption() {
+      let [inputValue, setInputValue] = useState('');
+    
+      return (
+        <ComboBox
+          allowsEmptyCollection
+          inputValue={inputValue}
+          onInputChange={setInputValue}>
+          <Label style={{display: 'block'}}>Favorite Animal</Label>
+          <div style={{display: 'flex'}}>
+            <Input />
+            <Button>
+              <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+            </Button>
+          </div>
+          <Popover placement="bottom end">
+            <ListBox>
+              {inputValue.length > 0 && (
+                <ListBoxItem onAction={onAction}>
+                  {`Create "${inputValue}"`}
+                </ListBoxItem>
+              )}
+              <ListBoxItem>Aardvark</ListBoxItem>
+              <ListBoxItem>Cat</ListBoxItem>
+              <ListBoxItem>Dog</ListBoxItem>
+              <ListBoxItem>Kangaroo</ListBoxItem>
+              <ListBoxItem>Panda</ListBoxItem>
+              <ListBoxItem>Snake</ListBoxItem>
+            </ListBox>
+          </Popover>
+        </ComboBox>
+      );
+    }
+
+    let tree = render(<WithCreateOption />);
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    act(() => {
+      comboboxTester.combobox.focus();
+    });
+
+    await user.keyboard('L');
+
+    let options = comboboxTester.options();
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('Create "L"');
+
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(comboboxTester.combobox).toHaveValue('');
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -399,7 +399,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {`
`399`	`399`	`}`
`400`	`400`	`}]`
`401`	`401`	`]}>`
`402`		`- {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}`
	`402`	`+ {!isLink && !props.onAction && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}`
`403`	`403`	`{typeof children === 'string' ? <Text slot="label">{children}</Text> : children}`
`404`	`404`	`</Provider>`
`405`	`405`	`</>`