ActionList: Prevent double key event when <button> is used (#4772)

* Prevent double key event when `<button>` is used * Add changeset * Add test
primer · Jul 25, 2024 · 3779dbf · 3779dbf
1 parent d6ca0cf
commit 3779dbf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/swift-peaches-fold.md 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
@@ -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(
-      <FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
+      <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
         <ActionList role="listbox">
           <ActionList.Item role="option">Item 1</ActionList.Item>
           <ActionList.Item role="option">Item 2</ActionList.Item>
@@ -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(
+      <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
+        <ActionList>
+          <ActionList.Item onSelect={mockOnSelect}>Item 1</ActionList.Item>
+        </ActionList>
+      </FeatureFlags>,
+    )
+    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
@@ -289,7 +289,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     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,