fix: fix menu item focus (#680)

* chore: test * fix: fix focus --------- Co-authored-by: tanghui <[email protected]>
react-component · Dec 6, 2023 · d21b6bb · d21b6bb
1 parent 67baccb
commit d21b6bb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/docs/examples/debug.tsx b/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>

diff --git a/src/Menu.tsx b/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);
 

diff --git a/tests/Menu.spec.tsx b/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"', () => {