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
primer · Aug 31, 2022 · 4cc6e52 · 4cc6e52
1 parent a348400
commit 4cc6e52
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/.changeset/actionmenu-reenable-focus-trap.md 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
@@ -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
@@ -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>
+    </>
+  )
+}