fix(menu): nested menu closes unexpectedly when hovering back from submenu item to parent menu item (#20881)

* fix(menu): nested menu closes unexpectedly when hovering

Menu should not close when relatedTarget is undefined.

* fix(menu): unit test case added

---------

Co-authored-by: Praveen Raj V <Venkatachalapathy.PraveenRaj@ibm.com>
Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com>
Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: 5 people

packages/react/src/components/Menu/Menu-test.js

@@ -125,6 +125,20 @@ describe('Menu', () => {
       expect(document.querySelector('.custom-class')).toBeInTheDocument();
       document.body.removeChild(el);
     });
+
+    it('should not call onClose when relatedTarget is null on blur', () => {
+      const onClose = jest.fn();
+      render(
+        <Menu open onClose={onClose} label="Test Menu">
+          <MenuItem label="item" />
+        </Menu>
+      );
+
+      const menu = screen.getByRole('menu');
+      fireEvent.blur(menu, { relatedTarget: null });
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
   });
 
   describe('Submenu behavior', () => {

packages/react/src/components/Menu/Menu.tsx

@@ -272,7 +272,13 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
   }
 
   function handleBlur(e: React.FocusEvent<HTMLUListElement>) {
-    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
+    if (
+      open &&
+      onClose &&
+      isRoot &&
+      e.relatedTarget &&
+      !menu.current?.contains(e.relatedTarget)
+    ) {
       handleClose();
     }
   }