From 4617f570273b3a702903d506aed8a2df6fc2c369 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 21 Sep 2022 16:21:49 -0700 Subject: [PATCH 1/2] fix: Make Menu openOnHover prop work again --- ...ui-react-menu-5eeb5c9b-a02e-4d75-aeee-9e9fd45a5aac.json | 7 +++++++ .../react-menu/src/components/Menu/useMenu.tsx | 5 +++-- 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 change/@fluentui-react-menu-5eeb5c9b-a02e-4d75-aeee-9e9fd45a5aac.json diff --git a/change/@fluentui-react-menu-5eeb5c9b-a02e-4d75-aeee-9e9fd45a5aac.json b/change/@fluentui-react-menu-5eeb5c9b-a02e-4d75-aeee-9e9fd45a5aac.json new file mode 100644 index 00000000000000..29eaedc7d7147a --- /dev/null +++ b/change/@fluentui-react-menu-5eeb5c9b-a02e-4d75-aeee-9e9fd45a5aac.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Make Menu openOnHover prop work again", + "packageName": "@fluentui/react-menu", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} 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 ca677101ab140b..d81699a2f40ab6 100644 --- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx +++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx @@ -25,6 +25,7 @@ import { Tab } from '@fluentui/keyboard-keys'; * @param props - props from this instance of Menu */ export const useMenu_unstable = (props: MenuProps): MenuState => { + const isSubmenu = useIsSubmenu(); const { hoverDelay = 500, inline = false, @@ -33,10 +34,10 @@ export const useMenu_unstable = (props: MenuProps): MenuState => { closeOnScroll = false, openOnContext = false, persistOnItemClick = false, + openOnHover = isSubmenu, defaultCheckedValues, } = props; const triggerId = useId('menu'); - const isSubmenu = useIsSubmenu(); const [contextTarget, setContextTarget] = usePositioningMouseTarget(); const positioningState = { @@ -96,7 +97,7 @@ export const useMenu_unstable = (props: MenuProps): MenuState => { hoverDelay, triggerId, isSubmenu, - openOnHover: isSubmenu, + openOnHover, contextTarget, setContextTarget, hasCheckmarks, From 0baf43c1c532e3173e90da4c61314e6e5888c334 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Thu, 22 Sep 2022 11:57:18 -0700 Subject: [PATCH 2/2] Add openOnHover cypress test --- .../react-menu/e2e/Menu.e2e.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/react-components/react-menu/e2e/Menu.e2e.tsx b/packages/react-components/react-menu/e2e/Menu.e2e.tsx index 61bce47b982c8d..f8ead57d4a1200 100644 --- a/packages/react-components/react-menu/e2e/Menu.e2e.tsx +++ b/packages/react-components/react-menu/e2e/Menu.e2e.tsx @@ -51,6 +51,28 @@ describe('MenuTrigger', () => { .should('be.focused'); }); + it('should open menu on hover if openOnHover is set', () => { + mount( + + + + + + + Item + + + , + ); + cy.get(menuTriggerSelector) + .realHover() + .wait(1) + .get(menuSelector) + .should('be.visible') + .get(menuItemSelector) + .should('be.focused'); + }); + it('should close menu on escape when focus is on the trigger', () => { mount(