From 6f6fa5ad4dc989266a18f758befbdc70fd97e60d Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 11 Oct 2022 10:24:36 +0200 Subject: [PATCH 1/2] fix: Menu trigger should be focused when menu is closed with keyboard keyboard handling flag was only set when the key was `Tab` this is incorrect and the keyboard handling flag should be set every time the event is a keyboard event --- packages/react-components/react-menu/e2e/Menu.e2e.tsx | 9 ++++++++- .../react-menu/src/components/Menu/useMenu.tsx | 8 +++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-menu/e2e/Menu.e2e.tsx b/packages/react-components/react-menu/e2e/Menu.e2e.tsx index cc3b17acc4a9c6..dbbac0c6109aaf 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 9264828f7397a8..9f2fb9a5985698 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) { From f19947558ce6ee39d9d1eb87a797e30b0f278c7a Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 11 Oct 2022 10:37:14 +0200 Subject: [PATCH 2/2] changefile --- ...ui-react-menu-5b06dfa2-a4e0-4c1c-8a7b-0784fe888b03.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-menu-5b06dfa2-a4e0-4c1c-8a7b-0784fe888b03.json 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 00000000000000..1e9af019c897b0 --- /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" +}