feat: focus item when focusing menu (#464)

* feat: focus item when focusing menu

* chore: update snapshot

* feat: focus active child

* fix: index > -1

* fix: use querySelecor instead

Author: MadCcc

src/Menu.tsx

@@ -27,7 +27,7 @@ import useAccessibility from './hooks/useAccessibility';
 import useUUID from './hooks/useUUID';
 import { PathRegisterContext, PathUserContext } from './context/PathContext';
 import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
-import { IdContext } from './context/IdContext';
+import { getMenuId, IdContext } from './context/IdContext';
 import PrivateContext from './context/PrivateContext';
 import { useImperativeHandle } from 'react';
 
@@ -235,13 +235,6 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
 
   const containerRef = React.useRef<HTMLUListElement>();
 
-  useImperativeHandle(ref, () => ({
-    list: containerRef.current,
-    focus: (options?: FocusOptions) => {
-      containerRef.current?.focus(options);
-    },
-  }));
-
   const uuid = useUUID(id);
 
   const isRtl = direction === 'rtl';
@@ -360,6 +353,21 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     setMergedActiveKey(undefined);
   });
 
+  useImperativeHandle(ref, () => ({
+    list: containerRef.current,
+    focus: options => {
+      const shouldFocusKey =
+        mergedActiveKey ?? childList.find(node => !node.props.disabled)?.key;
+      if (shouldFocusKey) {
+        containerRef.current
+          ?.querySelector<HTMLLIElement>(
+            `li[data-menu-id='${getMenuId(uuid, shouldFocusKey as string)}']`,
+          )
+          ?.focus?.(options);
+      }
+    },
+  }));
+
   // ======================== Select ========================
   // >>>>> Select keys
   const [mergedSelectKeys, setMergedSelectKeys] = useMergedState(

src/interface.ts

@@ -120,6 +120,10 @@ export type SelectEventHandler = (info: SelectInfo) => void;
 export type MenuClickEventHandler = (info: MenuInfo) => void;
 
 export type MenuRef = {
+  /**
+   * Focus active child if any, or the first child which is not disabled will be focused.
+   * @param options
+   */
   focus: (options?: FocusOptions) => void;
   list: HTMLUListElement;
 };

tests/Menu.spec.js

@@ -663,14 +663,28 @@ describe('Menu', () => {
     const menuRef = React.createRef();
     const wrapper = mount(
       <Menu ref={menuRef}>
+        <SubMenu key="bamboo" title="Disabled" disabled>
+          <MenuItem key="light">Disabled child</MenuItem>
+        </SubMenu>
         <MenuItem key="light">Light</MenuItem>
       </Menu>,
     );
     menuRef.current?.focus();
 
-    expect(document.activeElement).toBe(
-      wrapper.find('ul').first().getDOMNode(),
+    expect(document.activeElement).toBe(wrapper.find('li').last().getDOMNode());
+  });
+
+  it('should focus active item through ref', () => {
+    const menuRef = React.createRef();
+    const wrapper = mount(
+      <Menu ref={menuRef} activeKey="cat">
+        <MenuItem key="light">Light</MenuItem>
+        <MenuItem key="cat">Cat</MenuItem>
+      </Menu>,
     );
+    menuRef.current?.focus();
+
+    expect(document.activeElement).toBe(wrapper.find('li').last().getDOMNode());
   });
 });
 /* eslint-enable */

tests/__snapshots__/SubMenu.spec.js.snap

@@ -84,7 +84,7 @@ Array [
       <div>
         <div
           class="rc-menu-submenu rc-menu-submenu-popup custom-className"
-          style="opacity: 0; pointer-events: none;"
+          style="opacity: 0;"
         >
           <ul
             class="rc-menu rc-menu-sub rc-menu-vertical"