From 32451a25abf92196ec180df26439da0acfcfe281 Mon Sep 17 00:00:00 2001
From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:09:20 -0500
Subject: [PATCH 1/2] fix submenu focus

---
 src/Menu.tsx           | 35 ++++++++++++++++++------------
 tests/SubMenu.spec.tsx | 48 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/Menu.tsx b/src/Menu.tsx
index ef9db196..b23c73dd 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -378,20 +378,27 @@ 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);
-      }
-    },
-  }));
+  useImperativeHandle(ref, () => {
+    return {
+      list: containerRef.current,
+      focus: options => {
+        const shouldFocusKey =
+          mergedActiveKey ??
+          childList.find(
+            node =>
+              !node.props.disabled &&
+              (node.props.children.length || node.props.children.type),
+          )?.key;
+        if (shouldFocusKey) {
+          containerRef.current
+            ?.querySelector<HTMLElement>(
+              `[data-menu-id='${getMenuId(uuid, shouldFocusKey as string)}']`,
+            )
+            ?.focus?.(options);
+        }
+      },
+    };
+  });
 
   // ======================== Select ========================
   // >>>>> Select keys
diff --git a/tests/SubMenu.spec.tsx b/tests/SubMenu.spec.tsx
index f33f2426..5da796d4 100644
--- a/tests/SubMenu.spec.tsx
+++ b/tests/SubMenu.spec.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-undef */
 import { act, fireEvent, render } from '@testing-library/react';
+import { screen } from '@testing-library/dom';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
-import Menu, { MenuItem, SubMenu } from '../src';
+import Menu, { MenuItem, MenuRef, SubMenu } from '../src';
 import { isActive, last } from './util';
 
 jest.mock('@rc-component/trigger', () => {
@@ -496,8 +497,49 @@ describe('SubMenu', () => {
 
     fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
     runAllTimer();
-    expect((container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style.zIndex).toEqual('100');
-    expect((container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style.width).toEqual('150px');
+    expect(
+      (container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style
+        .zIndex,
+    ).toEqual('100');
+    expect(
+      (container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style
+        .width,
+    ).toEqual('150px');
+  });
+  it('focus menu to first menu item when .focus() is called', async () => {
+    const ref = React.createRef<MenuRef>();
+    const items = [
+      {
+        key: '1',
+        label: 'group title',
+        type: 'group',
+      },
+      {
+        key: '2',
+        label: 'menu item',
+        ['data-testid']: 'menu-item',
+      },
+    ];
+    await act(async () => render(<Menu ref={ref} items={items}></Menu>));
+    act(() => ref.current.focus());
+    screen.debug();
+    expect(screen.getByTestId('menu-item')).toHaveClass('rc-menu-item-active');
+  });
+  it('focus menu to first submenu when .focus() is called', async () => {
+    const ref = React.createRef<MenuRef>();
+    await act(async () =>
+      render(
+        <Menu ref={ref}>
+          <SubMenu data-testid="sub-menu" key="s1" title="submenu1">
+            <MenuItem key="s1-1">1</MenuItem>
+          </SubMenu>
+        </Menu>,
+      ),
+    );
+    act(() => ref.current.focus());
+    expect(screen.getByTestId('sub-menu')).toHaveClass(
+      'rc-menu-submenu-active',
+    );
   });
 });
 /* eslint-enable */

From b59525aff0d6bff159bcafe58e2819a848077dc3 Mon Sep 17 00:00:00 2001
From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com>
Date: Wed, 8 Nov 2023 19:27:39 -0500
Subject: [PATCH 2/2] remove debugger

---
 tests/SubMenu.spec.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/SubMenu.spec.tsx b/tests/SubMenu.spec.tsx
index 5da796d4..bbd36066 100644
--- a/tests/SubMenu.spec.tsx
+++ b/tests/SubMenu.spec.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
-import { act, fireEvent, render } from '@testing-library/react';
 import { screen } from '@testing-library/dom';
+import { act, fireEvent, render } from '@testing-library/react';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import Menu, { MenuItem, MenuRef, SubMenu } from '../src';
@@ -522,7 +522,6 @@ describe('SubMenu', () => {
     ];
     await act(async () => render(<Menu ref={ref} items={items}></Menu>));
     act(() => ref.current.focus());
-    screen.debug();
     expect(screen.getByTestId('menu-item')).toHaveClass('rc-menu-item-active');
   });
   it('focus menu to first submenu when .focus() is called', async () => {