diff --git a/change/@fluentui-react-menu-5b06dfa2-a4e0-4c1c-8a7b-0784fe888b03.json b/change/@fluentui-react-menu-5b06dfa2-a4e0-4c1c-8a7b-0784fe888b03.json new file mode 100644 index 0000000000000..1e9af019c897b --- /dev/null +++ b/change/@fluentui-react-menu-5b06dfa2-a4e0-4c1c-8a7b-0784fe888b03.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Menu trigger should be focused when menu is closed with keyboard", + "packageName": "@fluentui/react-menu", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-menu/e2e/Menu.e2e.tsx b/packages/react-components/react-menu/e2e/Menu.e2e.tsx index cc3b17acc4a9c..dbbac0c6109aa 100644 --- a/packages/react-components/react-menu/e2e/Menu.e2e.tsx +++ b/packages/react-components/react-menu/e2e/Menu.e2e.tsx @@ -403,7 +403,14 @@ describe('Menu', () => { , ); - cy.get(menuTriggerSelector).click().focused().type('{esc}').get(menuSelector).should('not.exist'); + cy.get(menuTriggerSelector) + .click() + .focused() + .type('{esc}') + .get(menuSelector) + .should('not.exist') + .get(menuTriggerSelector) + .should('be.focused'); }); it('should be dismissed on outside click', () => { diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx index 9264828f7397a..9f2fb9a598569 100644 --- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx +++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx @@ -185,10 +185,12 @@ const useMenuOpenState = ( state.setContextTarget(undefined); } - if (e.type === 'keydown' && (e as React.KeyboardEvent).key === Tab) { + if (e.type === 'keydown') { shouldHandleKeyboardRef.current = true; - shouldHandleTabRef.current = true; - pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey; + if ((e as React.KeyboardEvent).key === Tab) { + shouldHandleTabRef.current = true; + pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey; + } } if (data.bubble) {