From 4cc6e52a64f70065626607618931e35b419abc59 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 31 Aug 2022 12:05:42 +0200
Subject: [PATCH] ActionMenu: Fix keyboard navigation for ActionMenu inside
 Overlay (#2266)

* Re-enable focus trap

* linting

* same syntax

* passing tests

* Add changeset

* Update actionmenu-reenable-focus-trap.md

* change key bindings to Tabs in story

* change todo to known bug
---
 .changeset/actionmenu-reenable-focus-trap.md |  5 ++
 src/ActionMenu.tsx                           |  1 -
 src/stories/ActionMenu/fixtures.stories.tsx  | 54 +++++++++++++++++++-
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/actionmenu-reenable-focus-trap.md

diff --git a/.changeset/actionmenu-reenable-focus-trap.md b/.changeset/actionmenu-reenable-focus-trap.md
new file mode 100644
index 00000000000..fce95af2c83
--- /dev/null
+++ b/.changeset/actionmenu-reenable-focus-trap.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu: Fix keyboard navigation for ActionMenu inside Overlay by re-enabling focus trap. It was disabled in v35.6.0, that led to a regression for ActionMenu within focus zones (example: AnchoredOverlay)
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 9fead88da1f..ad0514a20bb 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -126,7 +126,6 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children,
       align={align}
       overlayProps={overlayProps}
       focusZoneSettings={{focusOutBehavior: 'wrap'}}
-      focusTrapSettings={{disabled: true}}
     >
       <div ref={containerRef}>
         <ActionListContainerContext.Provider
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 39a7379e43c..edd54bdb582 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -11,7 +11,8 @@ import {
   ActionMenu,
   ActionList,
   Button,
-  IconButton
+  IconButton,
+  AnchoredOverlay
 } from '../..'
 import {
   ServerIcon,
@@ -35,6 +36,7 @@ import {
   IconProps,
   IssueOpenedIcon
 } from '@primer/octicons-react'
+import {FocusKeys} from '@primer/behaviors'
 
 const meta: Meta = {
   title: 'Composite components/ActionMenu/fixtures',
@@ -788,3 +790,53 @@ export function TabTest(): JSX.Element {
     </>
   )
 }
+
+export function WithinFocusZone(): JSX.Element {
+  const [overlayOpen, setOverlayOpen] = React.useState(false)
+
+  return (
+    <>
+      <p>
+        When ActionMenu is used in a form inside an AnchoredOverlay, it is recommended to use key bindings for Tabs (not
+        ArrowKeys)
+      </p>
+      <p>
+        Known bug: Pressing Tab on an open menu should close the menu and put the focus on the next element instead of
+        the anchor.
+      </p>
+      <AnchoredOverlay
+        focusZoneSettings={{bindKeys: FocusKeys.Tab}}
+        renderAnchor={props => <Button {...props}>open overlay</Button>}
+        width="medium"
+        open={overlayOpen}
+        onOpen={() => setOverlayOpen(true)}
+        onClose={() => setOverlayOpen(false)}
+      >
+        <Box sx={{p: 4}}>
+          <FormControl sx={{mb: 2}}>
+            <FormControl.Label>First field</FormControl.Label>
+            <TextInput />
+          </FormControl>
+          <FormControl sx={{mb: 2}}>
+            <FormControl.Label>Second field</FormControl.Label>
+            <ActionMenu>
+              <ActionMenu.Button sx={{mb: 2}}>open menu</ActionMenu.Button>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>Item 1</ActionList.Item>
+                  <ActionList.Item>Item 2</ActionList.Item>
+                  <ActionList.Item>Item 3</ActionList.Item>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </FormControl>
+
+          <FormControl>
+            <FormControl.Label>Third field</FormControl.Label>
+            <TextInput />
+          </FormControl>
+        </Box>
+      </AnchoredOverlay>
+    </>
+  )
+}