diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx index 636b0141c43..9e5424a7834 100644 --- a/packages/react-aria-components/src/ListBox.tsx +++ b/packages/react-aria-components/src/ListBox.tsx @@ -356,7 +356,9 @@ export interface ListBoxItemProps extends RenderProps 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 ( { expect(onClick).toHaveBeenCalledTimes(1); }); }); + + describe('onKeyDown', () => { + it('should call onKeyDown handler when key is pressed on item', async () => { + let onKeyDown = jest.fn(); + renderListbox({}, {onKeyDown}); + + await user.tab(); + await user.keyboard('{Delete}'); + expect(onKeyDown).toHaveBeenCalledTimes(1); + + await user.keyboard('{Backspace}'); + expect(onKeyDown).toHaveBeenCalledTimes(2); + }); + }); });