fix(Menu): close flyout when hovering disabled items

packages/react-core/src/components/Menu/MenuItem.tsx

@@ -317,7 +317,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     if (disableHover) {
       return;
     }
-    if (hasFlyout) {
+    if (hasFlyout && !isAriaDisabled) {
       showFlyout(true);
     } else {
       setFlyoutRef(null);
@@ -445,11 +445,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           isDanger && styles.modifiers.danger,
           className
         )}
-        onMouseOver={() => {
-          if (!isAriaDisabled) {
-            onMouseOver();
-          }
-        }}
+        onMouseOver={onMouseOver}
         {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
         ref={ref}
         role={!hasCheckbox ? 'none' : 'menuitem'}

packages/react-core/src/components/Menu/MenuList.tsx

@@ -21,16 +21,26 @@ export const MenuList: React.FunctionComponent<MenuListProps> = ({
   className,
   isAriaMultiselectable = false,
   'aria-label': ariaLabel,
+  onMouseOver,
   ...props
 }: MenuListProps) => {
-  const { role } = useContext(MenuContext);
+  const { role, setFlyoutRef, disableHover } = useContext(MenuContext);
+
+  // Clear flyout reference when mouse is over the menu list itself, but not over a menu item
+  const handleMouseOver = (event: React.MouseEvent<HTMLUListElement>) => {
+    if (!disableHover && event.target === event.currentTarget) {
+      setFlyoutRef?.(null);
+    }
+    onMouseOver?.(event);
+  };
 
   return (
     <ul
       role={role}
       {...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
       className={css(styles.menuList, className)}
       aria-label={ariaLabel}
+      onMouseOver={handleMouseOver}
       {...props}
     >
       {children}

packages/react-core/src/components/Menu/__tests__/Menu.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import { Menu } from '../Menu';
@@ -94,4 +95,123 @@ describe('Menu', () => {
       expect(screen.getByText('Checkbox 1')).toBeInTheDocument();
     });
   });
+
+  describe('with containsFlyout', () => {
+    const flyoutMenu = (
+      <Menu containsFlyout>
+        <MenuContent>
+          <MenuList>
+            <MenuItem itemId="flyout-item">Flyout item</MenuItem>
+          </MenuList>
+        </MenuContent>
+      </Menu>
+    );
+
+    const renderFlyoutMenu = (siblingProps: MenuItemProps = {}) =>
+      render(
+        <Menu containsFlyout>
+          <MenuContent>
+            <MenuList>
+              <MenuItem flyoutMenu={flyoutMenu} itemId="trigger">
+                Trigger
+              </MenuItem>
+              <MenuItem itemId="sibling" {...siblingProps}>
+                Sibling
+              </MenuItem>
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      );
+
+    test('should open the flyout when hovering the trigger', async () => {
+      const user = userEvent.setup();
+      renderFlyoutMenu();
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+    });
+
+    test('should close the flyout when hovering a sibling item', async () => {
+      const user = userEvent.setup();
+      renderFlyoutMenu();
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+
+      await user.hover(screen.getByRole('menuitem', { name: 'Sibling' }));
+      expect(screen.queryByText('Flyout item')).not.toBeInTheDocument();
+    });
+
+    test('should close the flyout when hovering an aria-disabled sibling item', async () => {
+      const user = userEvent.setup();
+      renderFlyoutMenu({ isAriaDisabled: true });
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+
+      await user.hover(screen.getByRole('menuitem', { name: 'Sibling' }));
+      expect(screen.queryByText('Flyout item')).not.toBeInTheDocument();
+    });
+
+    test('should not open a flyout when hovering an aria-disabled trigger', async () => {
+      const user = userEvent.setup();
+      render(
+        <Menu containsFlyout>
+          <MenuContent>
+            <MenuList>
+              <MenuItem flyoutMenu={flyoutMenu} itemId="trigger" isAriaDisabled>
+                Trigger
+              </MenuItem>
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      );
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+
+      expect(screen.queryByText('Flyout item')).not.toBeInTheDocument();
+    });
+
+    test('should close the flyout when the pointer lands on the list itself', async () => {
+      const user = userEvent.setup();
+      renderFlyoutMenu({ isDisabled: true });
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+
+      fireEvent.mouseOver(screen.getAllByRole('menu')[0]);
+
+      expect(screen.queryByText('Flyout item')).not.toBeInTheDocument();
+    });
+
+    test('should keep the flyout open when a mouseover bubbles up from its contents', async () => {
+      const user = userEvent.setup();
+      renderFlyoutMenu();
+
+      await user.hover(screen.getByRole('button', { name: 'Trigger' }));
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+
+      fireEvent.mouseOver(screen.getAllByRole('menu')[1]);
+
+      expect(screen.getByText('Flyout item')).toBeInTheDocument();
+    });
+
+    test('should still call a consumer onMouseOver passed to MenuList', () => {
+      const onMouseOver = jest.fn();
+      render(
+        <Menu containsFlyout>
+          <MenuContent>
+            <MenuList onMouseOver={onMouseOver}>
+              <MenuItem itemId="item">Item</MenuItem>
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      );
+
+      fireEvent.mouseOver(screen.getByRole('menu'));
+
+      expect(onMouseOver).toHaveBeenCalledTimes(1);
+    });
+  });
 });