fix: fix menu item focus (#680)

* chore: test

* fix: fix focus

---------

Co-authored-by: tanghui <yoyo837@hotmail.com>

Author: MadCcc

docs/examples/debug.tsx

@@ -1,8 +1,8 @@
 /* eslint no-console:0 */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import type { CSSMotionProps } from 'rc-motion';
-import Menu, { ItemGroup as MenuItemGroup } from '../../src';
+import Menu, { ItemGroup as MenuItemGroup, MenuItem } from '../../src';
 import type { MenuProps } from '../../src';
 import '../../assets/index.less';
 import '../../assets/menu.less';
@@ -52,6 +52,7 @@ export default () => {
   const [inlineCollapsed, setInlineCollapsed] = React.useState(false);
   const [forceRender, setForceRender] = React.useState(false);
   const [openKeys, setOpenKeys] = React.useState<string[]>([]);
+  const menuRef = useRef();
 
   const onRootClick = (info: MenuInfo) => {
     console.log('Root Menu Item Click:', info);
@@ -68,6 +69,10 @@ export default () => {
   return (
     <>
       <div>
+        <Menu ref={menuRef}>
+          <MenuItem key="light">Light</MenuItem>
+        </Menu>
+        <button onClick={() => menuRef.current.focus()}>focus</button>
         <select value={mode} onChange={e => setMode(e.target.value as any)}>
           <option value="inline">Inline</option>
           <option value="vertical">Vertical</option>

src/Menu.tsx

@@ -397,7 +397,10 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
         );
 
         const shouldFocusKey =
-          mergedActiveKey ?? element2key.get(focusableElements[0]);
+          mergedActiveKey ??
+          (focusableElements[0]
+            ? element2key.get(focusableElements[0])
+            : childList.find(node => !node.props.disabled)?.key);
 
         const elementToFocus = key2element.get(shouldFocusKey);
 

tests/Menu.spec.tsx

@@ -701,6 +701,8 @@ describe('Menu', () => {
     );
 
     expect(menuRef.current?.list).toBe(container.querySelector('ul'));
+    act(() => menuRef.current.focus());
+    expect(document.activeElement).toBe(container.querySelector('li'));
   });
 
   it('should render a divider with role="separator"', () => {