feat: add onKeyDown prop to ListBoxItem for custom keyboard handling

packages/react-aria-components/src/ListBox.tsx

@@ -356,7 +356,9 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
    * Handler that is called when a user performs an action on the item. The exact user event depends on
    * the collection's `selectionBehavior` prop and the interaction modality.
    */
-  onAction?: () => void
+  onAction?: () => void,
+  /** Handler that is called when a key is pressed on the item. */
+  onKeyDown?: (e: React.KeyboardEvent) => void
 }
 
 /**
@@ -379,6 +381,8 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     onHoverEnd: item.props.onHoverEnd
   });
 
+  let keyDownProps = props.onKeyDown ? {onKeyDown: props.onKeyDown} : undefined;
+
   let draggableItem: DraggableItemResult | null = null;
   if (dragState && dragAndDropHooks) {
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasAction: states.hasAction}, dragState);
@@ -422,7 +426,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
 
   return (
     <ElementType
-      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, keyDownProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -808,3 +808,4 @@ export let VirtualizedListBoxDndOnAction: ListBoxStory = () => {
   );
 };
 
+

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

@@ -1861,4 +1861,18 @@ describe('ListBox', () => {
       expect(onClick).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('onKeyDown', () => {
+    it('should call onKeyDown handler when key is pressed on item', () => {
+      let onKeyDown = jest.fn();
+      let {getAllByRole} = renderListbox({}, {onKeyDown});
+      let options = getAllByRole('option');
+
+      fireEvent.keyDown(options[0], {key: 'Delete'});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+
+      fireEvent.keyDown(options[1], {key: 'Backspace'});
+      expect(onKeyDown).toHaveBeenCalledTimes(2);
+    });
+  });
 });