From 9ee8ec9a16d9a72e4723163115dd59ce7e8dce28 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 25 Jun 2024 10:38:17 -0400
Subject: [PATCH] Fix `ActionList.Item` conditional when FF is not enabled
 (#4695)

* Fix conditional when FF is not enabled

* Add changeset
---
 .changeset/modern-cooks-decide.md             |  5 ++++
 .../react/src/ActionList/ActionList.test.tsx  | 28 +++++++++++++++++++
 packages/react/src/ActionList/Item.tsx        |  2 +-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-cooks-decide.md

diff --git a/.changeset/modern-cooks-decide.md b/.changeset/modern-cooks-decide.md
new file mode 100644
index 00000000000..7233234208b
--- /dev/null
+++ b/.changeset/modern-cooks-decide.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes conditional in `ActionList.Item` that was dependent on FF being active before applying forwarded ref.
diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx
index 04cf1386f67..9c5c4afe14f 100644
--- a/packages/react/src/ActionList/ActionList.test.tsx
+++ b/packages/react/src/ActionList/ActionList.test.tsx
@@ -426,6 +426,34 @@ describe('ActionList', () => {
     expect(listItems.length).toBe(2)
   })
 
+  it('should apply ref to ActionList.Item when feature flag is disabled', async () => {
+    const MockComponent = () => {
+      const ref = React.useRef<HTMLLIElement>(null)
+
+      const focusRef = () => {
+        if (ref.current) ref.current.focus()
+      }
+
+      return (
+        <FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
+          <button onClick={focusRef}>Prompt</button>
+          <ActionList>
+            <ActionList.Item ref={ref}>Item 1</ActionList.Item>
+            <ActionList.Item>Item 2</ActionList.Item>
+          </ActionList>
+        </FeatureFlags>
+      )
+    }
+
+    const {getByRole} = HTMLRender(<MockComponent />)
+    const triggerBtn = getByRole('button', {name: 'Prompt'})
+    const focusTarget = getByRole('listitem', {name: 'Item 1'})
+
+    fireEvent.click(triggerBtn)
+
+    expect(document.activeElement).toBe(focusTarget)
+  })
+
   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}}>
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index c003f94c140..0cf06a981c1 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -368,7 +368,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         value={{variant, disabled, inactive: Boolean(inactiveText), inlineDescriptionId, blockDescriptionId}}
       >
         <LiBox
-          ref={buttonSemanticsFeatureFlag || listSemantics ? forwardedRef : null}
+          ref={!buttonSemanticsFeatureFlag || listSemantics ? forwardedRef : null}
           sx={
             buttonSemanticsFeatureFlag
               ? merge<BetterSystemStyleObject>(