Merge b59525a into 36f47b5

react-component · Nov 9, 2023 · 21cb290 · 21cb290
2 parents 36f47b5 + b59525a
commit 21cb290
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 17 deletions.
diff --git 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
@@ -1,8 +1,9 @@
 /* eslint-disable no-undef */
+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, SubMenu } from '../src';
+import Menu, { MenuItem, MenuRef, SubMenu } from '../src';
 import { isActive, last } from './util';
 
 jest.mock('@rc-component/trigger', () => {
@@ -496,8 +497,48 @@ 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());
+    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 */