From 3779dbf117793112945668fe2694cdc6715c2e32 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 25 Jul 2024 17:54:10 -0400
Subject: [PATCH] ActionList: Prevent double key event when `<button>` is used
 (#4772)

* Prevent double key event when `<button>` is used

* Add changeset

* Add test
---
 .changeset/swift-peaches-fold.md              |  5 +++++
 .../react/src/ActionList/ActionList.test.tsx  | 22 ++++++++++++++++++-
 packages/react/src/ActionList/Item.tsx        |  2 +-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/swift-peaches-fold.md

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(
-      <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
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<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,