diff --git a/.changeset/swift-peaches-fold.md b/.changeset/swift-peaches-fold.md new file mode 100644 index 00000000000..8485f60ec53 --- /dev/null +++ b/.changeset/swift-peaches-fold.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +(Behind feature flag) ActionList: Fix issue where triggering a keyboard event was possible when using the `onSelect` prop diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 4e47d219758..06a35990b2c 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -492,7 +492,7 @@ describe('ActionList', () => { it('should render ActionList.Item as li when feature flag is enabled and has proper aria role', async () => { const {container} = HTMLRender( - + Item 1 Item 2 @@ -570,4 +570,24 @@ describe('ActionList', () => { await userEvent.tab() expect(document.activeElement).toHaveAccessibleName('Action') }) + + it('should only trigger a key event once when feature flag is enabled', async () => { + const mockOnSelect = jest.fn() + const user = userEvent.setup() + const {getByRole} = HTMLRender( + + + Item 1 + + , + ) + const item = getByRole('button') + + item.focus() + + expect(document.activeElement).toBe(item) + await user.keyboard('{Enter}') + + expect(mockOnSelect).toHaveBeenCalledTimes(1) + }) }) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index e52cb2fd95f..8d5ce7f565c 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -289,7 +289,7 @@ export const Item = React.forwardRef( const menuItemProps = { onClick: clickHandler, - onKeyPress: keyPressHandler, + onKeyPress: !buttonSemantics ? keyPressHandler : undefined, 'aria-disabled': disabled ? true : undefined, 'data-inactive': inactive ? true : undefined, 'data-loading': loading && !inactive ? true : undefined,