diff --git a/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json b/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json new file mode 100644 index 00000000000000..07bcc941d409f4 --- /dev/null +++ b/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Context menu close should restore focus", + "packageName": "@fluentui/react-menu", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx index 617f80aa28b02a..cd14d6a0d19d53 100644 --- a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx +++ b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx @@ -1069,7 +1069,9 @@ describe('Context menu', () => { .get(menuTriggerSelector) .click() .get(menuSelector) - .should('not.exist'); + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); }); it('should close on scroll outside', () => { @@ -1081,6 +1083,21 @@ describe('Context menu', () => { .get('body') .trigger('wheel') .get(menuSelector) - .should('not.exist'); + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); + }); + + it('should restore focus on escape', () => { + mount(); + cy.get(menuTriggerSelector) + .rightclick() + .get(menuSelector) + .should('exist') + .focused() + .type('{esc}') + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); }); }); diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts index 6235d7a072834b..cbb66c8d5348d0 100644 --- a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts +++ b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts @@ -127,6 +127,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta id: triggerId, ...child?.props, ref: useMergedRefs(triggerRef, child?.ref), + ...restoreFocusTargetAttribute, onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)), onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)), onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)), @@ -136,7 +137,6 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta const triggerChildProps = { 'aria-haspopup': 'menu', 'aria-expanded': !open && !isSubmenu ? undefined : open, - ...restoreFocusTargetAttribute, ...contextMenuProps, onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)), onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),