fix(react-menu-grid-preview): submenus stay open when moving mouse from trigger to popover

change/@fluentui-react-menu-grid-preview-fix-submenu-hover.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-menu-grid-preview): submenus inside MenuGrid now stay open when moving mouse from trigger to submenu popover",
+  "packageName": "@fluentui/react-menu-grid-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-menu-grid-preview/library/etc/react-menu-grid-preview.api.md

@@ -8,6 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
+import type { MenuListContextValue } from '@fluentui/react-menu';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -49,6 +50,7 @@ export type MenuGridContextValue = {
 // @public (undocumented)
 export type MenuGridContextValues = {
     menuGrid: MenuGridContextValue;
+    menuList: MenuListContextValue;
 };
 
 // @public

packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.cy.tsx

@@ -12,6 +12,7 @@ const mount = (element: JSXElement) => {
   mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
 };
 
+const gridSelector = '[role="grid"]';
 const menuSelector = '[role="menu"]';
 const menuGridItemSelector = '[role="row"]';
 
@@ -167,6 +168,66 @@ describe('More complex menus', () => {
   });
 });
 
+const WithSubmenuInsideMenuExample = () => {
+  return (
+    <Menu open>
+      <MenuTrigger disableButtonEnhancement>
+        <button>Open</button>
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuGrid>
+          {items.map(name => (
+            <MenuGridItem key={name} firstSubAction={<Submenu />}>
+              {name}
+            </MenuGridItem>
+          ))}
+        </MenuGrid>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+describe('With MenuList submenus inside outer Menu', () => {
+  it('should open submenu on trigger hover', () => {
+    mount(<WithSubmenuInsideMenuExample />);
+    // trigger('mousemove') instead of realHover: the trigger button is inside a portal and may
+    // not be reachable by real CDP mouse events in the headless test viewport. A synthetic
+    // mousemove fires useMenuTrigger.onMouseMove, which schedules open after hoverDelay (500ms).
+    cy.get('button').contains('More actions').first().trigger('mousemove');
+    cy.get(menuSelector).should('have.length', 1);
+  });
+
+  it('should keep submenu open when mouse moves from trigger to submenu popover', () => {
+    mount(<WithSubmenuInsideMenuExample />);
+
+    // Open the submenu - real timers so requestAnimationFrame runs and popoverRef is set.
+    cy.get('button').contains('More actions').first().trigger('mousemove');
+    cy.get(menuSelector).should('have.length', 1);
+
+    // Install clock AFTER submenu is fully rendered, following the safeZone test pattern in
+    // react-menu. Installing it earlier freezes requestAnimationFrame, leaving popoverRef null.
+    cy.clock(0).then(() => {
+      // Simulate mouse crossing the outer MenuPopover area (going from trigger toward submenu).
+      // mouseover on [role="grid"] bubbles to the outer MenuPopover where
+      // mouseOverListenerCallbackRef fires dispatchMenuEnterEvent. The submenu's
+      // useOnMenuMouseEnter listener sees the target is outside the submenu's popover and
+      // schedules a close timeout (hoverDelay = 500ms, frozen by cy.clock).
+      cy.get(gridSelector).trigger('mouseover');
+
+      // Simulate mouse entering the submenu. mouseover on [role="menu"] bubbles to the
+      // submenu's MenuPopover and triggers MenuPopover.onMouseEnter. Because the submenu has
+      // isSubmenu=true (thanks to MenuListContext provided by MenuGrid), onMouseEnter calls
+      // setOpen(open: true) → clearOpenTimeout(), cancelling the scheduled close.
+      cy.get(menuSelector).trigger('mouseover');
+
+      // Advance past the close delay (hoverDelay = 500ms)
+      cy.tick(600);
+
+      cy.get(menuSelector).should('have.length', 1);
+    });
+  });
+});
+
 describe('With MenuList submenus', () => {
   it('should not open a submenu trigger with ArrowDown', () => {
     mount(<WithSubmenuExample />);

packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.types.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import { TabsterDOMAttribute } from '@fluentui/react-tabster';
+import type { MenuListContextValue } from '@fluentui/react-menu';
 
 import type { MenuGridContextValue } from '../../contexts/menuGridContext';
 
@@ -18,4 +19,5 @@ export type MenuGridState = ComponentState<MenuGridSlots> & {
 
 export type MenuGridContextValues = {
   menuGrid: MenuGridContextValue;
+  menuList: MenuListContextValue;
 };

packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/renderMenuGrid.tsx

@@ -2,6 +2,7 @@
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
+import { MenuListProvider } from '@fluentui/react-menu';
 import { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';
 import { MenuGridContextProvider } from '../../contexts/menuGridContext';
 
@@ -12,8 +13,10 @@ export const renderMenuGrid_unstable = (state: MenuGridState, contextValues: Men
   assertSlots<MenuGridSlots>(state);
 
   return (
-    <MenuGridContextProvider value={contextValues.menuGrid}>
-      <state.root />
-    </MenuGridContextProvider>
+    <MenuListProvider value={contextValues.menuList}>
+      <MenuGridContextProvider value={contextValues.menuGrid}>
+        <state.root />
+      </MenuGridContextProvider>
+    </MenuListProvider>
   );
 };

packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/useMenuGridContextValues.ts

@@ -3,9 +3,15 @@
 import * as React from 'react';
 import type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';
 
+const menuList = {
+  checkedValues: {},
+  hasIcons: false,
+  hasCheckmarks: false,
+};
+
 export function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {
   const { tableRowTabsterAttribute } = state;
   const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);
 
-  return { menuGrid };
+  return { menuGrid, menuList };
 }