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> = ({children, align={align} overlayProps={overlayProps} focusZoneSettings={{focusOutBehavior: 'wrap'}} - focusTrapSettings={{disabled: true}} >
) } + +export function WithinFocusZone(): JSX.Element { + const [overlayOpen, setOverlayOpen] = React.useState(false) + + return ( + <> +

+ When ActionMenu is used in a form inside an AnchoredOverlay, it is recommended to use key bindings for Tabs (not + ArrowKeys) +

+

+ Known bug: Pressing Tab on an open menu should close the menu and put the focus on the next element instead of + the anchor. +

+ } + width="medium" + open={overlayOpen} + onOpen={() => setOverlayOpen(true)} + onClose={() => setOverlayOpen(false)} + > + + + First field + + + + Second field + + open menu + + + Item 1 + Item 2 + Item 3 + + + + + + + Third field + + + + + + ) +}