From d21b6bb62614e5d5ada70faf5511b96c02c26ef2 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Wed, 6 Dec 2023 19:09:51 +0800
Subject: [PATCH] fix: fix menu item focus (#680)

* chore: test

* fix: fix focus

---------

Co-authored-by: tanghui <yoyo837@hotmail.com>
---
 docs/examples/debug.tsx | 9 +++++++--
 src/Menu.tsx            | 5 ++++-
 tests/Menu.spec.tsx     | 2 ++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
index 71a34a7d..928f75da 100644
--- 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
index e2e86d33..aa50e63b 100644
--- 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
index a4d35c78..840f6f0b 100644
--- 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"', () => {