fix: MenuItem is only focused when mouse cursor is moved (#33725)

Author: ling1726

change/@fluentui-react-menu-820da09f-c52a-4751-a749-7f8ca4387d65.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: MenuItem is only focused when mouse cursor is moved",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx

@@ -40,13 +40,13 @@ describe('MenuItem', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should focus the item on mouseenter', () => {
+  it('should focus the item on mousemove', () => {
     // Arrange
     const { getByRole } = render(<MenuItem>Item</MenuItem>);
 
     // Act
     const menuitem = getByRole('menuitem');
-    fireEvent.mouseEnter(menuitem);
+    fireEvent.mouseMove(menuitem);
 
     // Assert
     expect(document.activeElement).toBe(menuitem);

packages/react-components/react-menu/library/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`MenuItem renders a default state 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
-  onMouseEnter={[Function]}
+  onMouseMove={[Function]}
   role="menuitem"
   tabIndex={0}
 >

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx

@@ -74,10 +74,12 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
               dismissedWithKeyboardRef.current = true;
             }
           }),
-          onMouseEnter: useEventCallback(event => {
-            innerRef.current?.focus();
+          onMouseMove: useEventCallback(event => {
+            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
+              innerRef.current?.focus();
+            }
 
-            props.onMouseEnter?.(event);
+            props.onMouseMove?.(event);
           }),
           onClick: useEventCallback(event => {
             if (!hasSubmenu && !persistOnClick) {

packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
-  onMouseEnter={[Function]}
+  onMouseMove={[Function]}
   role="menuitemcheckbox"
   tabIndex={0}
 >

packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
-  onMouseEnter={[Function]}
+  onMouseMove={[Function]}
   role="menuitemradio"
   tabIndex={0}
 >

packages/react-components/react-menu/library/src/components/MenuList/MenuList.cy.tsx

@@ -22,7 +22,7 @@ describe('MenuList', () => {
       </div>,
     );
     cy.get(menuItemSelector).each(el => {
-      cy.wrap(el).trigger('mouseover').should('be.focused');
+      cy.wrap(el).trigger('mousemove').should('be.focused');
     });
   });