fix: focus issue in menu

Author: preetibansalui

packages/react/src/components/Menu/Menu.stories.js

@@ -49,6 +49,11 @@ export const Playground = (args) => {
 
   return (
     <Menu {...args} target={target} x={document?.dir === 'rtl' ? 250 : 0}>
+      <MenuItem label="Copy" shortcut="⌘C" onClick={itemOnClick} />
+      <MenuItemDivider />
+      <MenuItem label="Cut" shortcut="⌘X" onClick={itemOnClick}>
+        <MenuItem label="Cuts" shortcut="⌘ssX" onClick={itemOnClick} />
+      </MenuItem>
       <MenuItem label="Share with">
         <MenuItemRadioGroup
           label="Share with"
@@ -57,8 +62,6 @@ export const Playground = (args) => {
           onChange={radioOnChange}
         />
       </MenuItem>
-      <MenuItemDivider />
-      <MenuItem label="Cut" shortcut="⌘X" onClick={itemOnClick} />
       <MenuItem label="Copy" shortcut="⌘C" onClick={itemOnClick} />
       <MenuItem label="Paste" shortcut="⌘V" disabled onClick={itemOnClick} />
       <MenuItemDivider />

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

@@ -22,7 +22,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-
+import {
+  useHover,
+  useFloating,
+  useInteractions,
+  safePolygon,
+  autoUpdate,
+  FloatingFocusManager,
+} from '@floating-ui/react';
 import { CaretRight, CaretLeft, Checkmark } from '@carbon/icons-react';
 import { keys, match } from '../../internal/keyboard';
 import { useControllableState } from '../../internal/useControllableState';
@@ -79,9 +86,6 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
   shortcut?: string;
 }
 
-const hoverIntentDelay = 150; // in ms
-const leaveIntentDelay = 300; // in ms
-
 export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
   function MenuItem(
     {
@@ -97,26 +101,39 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
     },
     forwardRef
   ) {
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    const [rtl, setRtl] = useState(false);
+
+    const {
+      refs,
+      floatingStyles,
+      context: floatingContext,
+    } = useFloating({
+      open: submenuOpen,
+      onOpenChange: setSubmenuOpen,
+      placement: rtl ? 'left-start' : 'right-start',
+      whileElementsMounted: autoUpdate,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+      useHover(floatingContext, {
+        enabled: true,
+        handleClose: safePolygon({
+          requireIntent: true,
+        }),
+      }),
+    ]);
+
     const prefix = usePrefix();
     const context = useContext(MenuContext);
 
     const menuItem = useRef<HTMLLIElement>(null);
-    const ref = useMergedRefs<HTMLLIElement>([forwardRef, menuItem]);
-    const [boundaries, setBoundaries] = useState<{
-      x: number | [number, number];
-      y: number | [number, number];
-    }>({ x: -1, y: -1 });
-    const [rtl, setRtl] = useState(false);
+    const ref = useMergedRefs<HTMLLIElement>([
+      forwardRef,
+      menuItem,
+      refs.setReference,
+    ]);
 
     const hasChildren = Boolean(children);
-    const [submenuOpen, setSubmenuOpen] = useState(false);
-    const hoverIntentTimeout = useRef<ReturnType<typeof setTimeout> | null>(
-      null
-    );
-
-    const leaveIntentTimeout = useRef<ReturnType<typeof setTimeout> | null>(
-      null
-    );
 
     const isDisabled = disabled && !hasChildren;
     const isDanger = kind === 'danger' && !hasChildren;
@@ -136,32 +153,19 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
         return;
       }
 
-      const { x, y, width, height } = menuItem.current.getBoundingClientRect();
-      if (rtl) {
-        setBoundaries({
-          x: [-x, x - width],
-          y: [y, y + height],
-        });
-      } else {
-        setBoundaries({
-          x: [x, x + width],
-          y: [y, y + height],
-        });
-      }
-
       setSubmenuOpen(true);
     }
 
     function closeSubmenu() {
       setSubmenuOpen(false);
-      setBoundaries({ x: -1, y: -1 });
     }
 
     function handleClick(
       e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>
     ) {
       if (!isDisabled) {
         if (hasChildren) {
+          setSubmenuOpen(true);
           openSubmenu();
         } else {
           context.state.requestCloseRoot(e);
@@ -173,29 +177,6 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       }
     }
 
-    function handleMouseEnter() {
-      if (leaveIntentTimeout.current) {
-        // When mouse reenters before closing keep sub menu open
-        clearTimeout(leaveIntentTimeout.current);
-        leaveIntentTimeout.current = null;
-      }
-      hoverIntentTimeout.current = setTimeout(() => {
-        openSubmenu();
-      }, hoverIntentDelay);
-    }
-
-    function handleMouseLeave() {
-      if (hoverIntentTimeout.current) {
-        clearTimeout(hoverIntentTimeout.current);
-        // Avoid closing the sub menu as soon as mouse leaves
-        // prevents accidental closure due to scroll bar
-        leaveIntentTimeout.current = setTimeout(() => {
-          closeSubmenu();
-          menuItem.current?.focus();
-        }, leaveIntentDelay);
-      }
-    }
-
     function handleKeyDown(e: React.KeyboardEvent<HTMLLIElement>) {
       if (hasChildren && match(e, keys.ArrowRight)) {
         openSubmenu();
@@ -245,48 +226,63 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       }
     }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
 
+    useEffect(() => {
+      Object.keys(floatingStyles).forEach((style) => {
+        if (refs.floating.current && style !== 'position') {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }, [floatingStyles, refs.floating]);
+
     return (
-      <li
-        role="menuitem"
-        {...rest}
-        ref={ref}
-        className={classNames}
-        tabIndex={-1}
-        aria-disabled={isDisabled ?? undefined}
-        aria-haspopup={hasChildren ?? undefined}
-        aria-expanded={hasChildren ? submenuOpen : undefined}
-        onClick={handleClick}
-        onMouseEnter={hasChildren ? handleMouseEnter : undefined}
-        onMouseLeave={hasChildren ? handleMouseLeave : undefined}
-        onKeyDown={handleKeyDown}>
-        <div className={`${prefix}--menu-item__icon`}>
-          {iconsAllowed && IconElement && <IconElement />}
-        </div>
-        <Text as="div" className={`${prefix}--menu-item__label`} title={label}>
-          {label}
-        </Text>
-        {shortcut && !hasChildren && (
-          <div className={`${prefix}--menu-item__shortcut`}>{shortcut}</div>
-        )}
-        {hasChildren && (
-          <>
-            <div className={`${prefix}--menu-item__shortcut`}>
-              {rtl ? <CaretLeft /> : <CaretRight />}
-            </div>
-            <Menu
-              label={label}
-              open={submenuOpen}
-              onClose={() => {
-                closeSubmenu();
-                menuItem.current?.focus();
-              }}
-              x={boundaries.x}
-              y={boundaries.y}>
-              {children}
-            </Menu>
-          </>
-        )}
-      </li>
+      <FloatingFocusManager
+        context={floatingContext}
+        order={['reference', 'floating']}
+        visuallyHiddenDismiss>
+        <li
+          role="menuitem"
+          {...rest}
+          ref={ref}
+          className={classNames}
+          tabIndex={-1}
+          aria-disabled={isDisabled ?? undefined}
+          aria-haspopup={hasChildren ?? undefined}
+          aria-expanded={hasChildren ? submenuOpen : undefined}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          {...getReferenceProps()}>
+          <div className={`${prefix}--menu-item__icon`}>
+            {iconsAllowed && IconElement && <IconElement />}
+          </div>
+          <Text
+            as="div"
+            className={`${prefix}--menu-item__label`}
+            title={label}>
+            {label}
+          </Text>
+          {shortcut && !hasChildren && (
+            <div className={`${prefix}--menu-item__shortcut`}>{shortcut}</div>
+          )}
+          {hasChildren && (
+            <>
+              <div className={`${prefix}--menu-item__shortcut`}>
+                {rtl ? <CaretLeft /> : <CaretRight />}
+              </div>
+              <Menu
+                label={label}
+                open={submenuOpen}
+                onClose={() => {
+                  closeSubmenu();
+                  menuItem.current?.focus();
+                }}
+                ref={refs.setFloating}
+                {...getFloatingProps()}>
+                {children}
+              </Menu>
+            </>
+          )}
+        </li>
+      </FloatingFocusManager>
     );
   }
 );