diff --git a/change/@fluentui-react-menu-f0444c28-2710-4a6e-bfa1-c6a4b6d2f24f.json b/change/@fluentui-react-menu-f0444c28-2710-4a6e-bfa1-c6a4b6d2f24f.json new file mode 100644 index 0000000000000..58ccdb255be7a --- /dev/null +++ b/change/@fluentui-react-menu-f0444c28-2710-4a6e-bfa1-c6a4b6d2f24f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Remove MenuItem focus on hover", + "packageName": "@fluentui/react-menu", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx index cd14d6a0d19d5..a161b9a41221c 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx +++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx @@ -255,27 +255,6 @@ describe('MenuItem', () => { .get(menuSelector) .should('be.visible'); }); - - it('should focus on hover', () => { - mount( -
, - ); - cy.get(menuTriggerSelector) - .trigger('click') - .get(menuItemSelector) - .each(el => { - cy.wrap(el).trigger('mouseover').should('be.focused'); - }); - }); }); describe('MenuItemCheckbox', () => { diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx index c5d7ace4ef667..37e0aa53f4b60 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx @@ -39,18 +39,6 @@ describe('MenuItem', () => { expect(tree).toMatchSnapshot(); }); - it('should focus the item on mouseenter', () => { - // Arrange - const { getByRole } = render(); - - // Act - const menuitem = getByRole('menuitem'); - fireEvent.mouseEnter(menuitem); - - // Assert - expect(document.activeElement).toBe(menuitem); - }); - it('should render submenu indicator icon if wrapped by menu trigger context', () => { // Arrange const slot = 'submenu'; diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap index dc257c5e2d570..cea726b28364a 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap +++ b/packages/react-components/react-menu/library/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap @@ -6,7 +6,6 @@ exports[`MenuItem renders a default state 1`] = ` onClick={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} - onMouseEnter={[Function]} role="menuitem" tabIndex={0} > diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx index 7794817ba8e39..4e1bed561cd5b 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx @@ -66,11 +66,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref