From 0c97a41e391d45977493849ec06a4b14c45cc1aa Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 7 Jan 2025 18:09:20 +0000
Subject: [PATCH 1/2] fix: Remove MenuItem focus on hover

In order to be consistent with Combobox/Dropdown/TagPicker on
hover/focused states - this PR removes the behaviour of Menu where items
are focused on hover even though this seems to be the prevailing pattern
with the ARIA working group https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/
---
 .../library/src/components/Menu/Menu.cy.tsx   | 21 -------------------
 .../src/components/MenuItem/MenuItem.test.tsx | 12 -----------
 .../__snapshots__/MenuItem.test.tsx.snap      |  1 -
 .../src/components/MenuItem/useMenuItem.tsx   |  5 -----
 .../MenuItemCheckbox.test.tsx.snap            |  1 -
 .../__snapshots__/MenuItemRadio.test.tsx.snap |  1 -
 .../src/components/MenuList/MenuList.cy.tsx   | 15 -------------
 7 files changed, 56 deletions(-)

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 cd14d6a0d19d53..a161b9a41221c3 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(
-      <Menu>
-        <MenuTrigger disableButtonEnhancement>
-          <button id={menuTriggerId}>Menu</button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>Item</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>,
-    );
-    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 c5d7ace4ef6678..37e0aa53f4b60f 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(<MenuItem>Item</MenuItem>);
-
-    // 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 dc257c5e2d570c..cea726b28364ae 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 7794817ba8e39b..4e1bed561cd5b9 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<ARIABu
               dismissedWithKeyboardRef.current = true;
             }
           }),
-          onMouseEnter: useEventCallback(event => {
-            innerRef.current?.focus();
-
-            props.onMouseEnter?.(event);
-          }),
           onClick: useEventCallback(event => {
             if (!hasSubmenu && !persistOnClick) {
               setOpen(event, {
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 47e84002411fd2..c00c9a04b8c2c9 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
-  onMouseEnter={[Function]}
   role="menuitemcheckbox"
   tabIndex={0}
 >
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index 6c1f079c2da6ba..df0c9c81d5be98 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`MenuItemRadio renders a default state 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
-  onMouseEnter={[Function]}
   role="menuitemradio"
   tabIndex={0}
 >
diff --git a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.cy.tsx b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.cy.tsx
index bcfe5222076d67..85c4c8253a0430 100644
--- a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.cy.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.cy.tsx
@@ -11,21 +11,6 @@ const mount = (element: JSX.Element) => {
   mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
 };
 describe('MenuList', () => {
-  it('should focus each menu item on hover', () => {
-    mount(
-      <div style={{ width: 'max-content', border: '1px solid black', paddingTop: 4, paddingBottom: 4 }}>
-        <MenuList>
-          <MenuItem>Cut</MenuItem>
-          <MenuItem>Paste</MenuItem>
-          <MenuItem>Edit</MenuItem>
-        </MenuList>
-      </div>,
-    );
-    cy.get(menuItemSelector).each(el => {
-      cy.wrap(el).trigger('mouseover').should('be.focused');
-    });
-  });
-
   describe('With nested submenus', () => {
     const Example = () => {
       return (

From bb882227863611256fad52eb1618b7a567abc904 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 7 Jan 2025 18:11:45 +0000
Subject: [PATCH 2/2] changefile

---
 ...ui-react-menu-f0444c28-2710-4a6e-bfa1-c6a4b6d2f24f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-menu-f0444c28-2710-4a6e-bfa1-c6a4b6d2f24f.json

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 00000000000000..58ccdb255be7a3
--- /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"
+}