fix: active wrong when submenus has key '' (#721)

* fix: active wrong when submenus has key '' * feat:optimise code * feat: add test * fix:grammar * Update tests/SubMenu.spec.tsx --------- Co-authored-by: afc163 <afc163@gmail.com>
react-component · Jun 20, 2024 · 526a924 · 526a924
1 parent 99a1709
commit 526a924
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/src/hooks/useKeyRecords.ts b/src/hooks/useKeyRecords.ts
@@ -74,14 +74,14 @@ export default function useKeyRecords() {
 
   const isSubPathKey = useCallback(
     (pathKeys: string[], eventKey: string) =>
-      pathKeys.some(pathKey => {
-        const pathKeyList = getKeyPath(pathKey, true);
-
-        return pathKeyList.includes(eventKey);
-      }),
+      pathKeys
+        .filter(item => item !== undefined)
+        .some(pathKey => {
+          const pathKeyList = getKeyPath(pathKey, true);
+          return pathKeyList.includes(eventKey);
+        }),
     [getKeyPath],
   );
-
   const getKeys = () => {
     const keys = [...key2pathRef.current.keys()];
 

diff --git a/tests/SubMenu.spec.tsx b/tests/SubMenu.spec.tsx
@@ -150,6 +150,31 @@ describe('SubMenu', () => {
     expect(childText).toEqual('submenu');
   });
 
+  it(`The submenu item with key '' must not persistently remain active`, () => {
+    const { container } = render(
+      <Menu
+        mode="horizontal"
+        items={[
+          {
+            label: '菜单一',
+            key: '1',
+          },
+          {
+            label: '菜单二',
+            key: '',
+            children: [
+              {
+                label: 'Navigation One1',
+                key: 'mail1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+    expect(container.querySelector('.rc-menu-submenu-active')).toBeFalsy();
+  });
+
   describe('openSubMenuOnMouseEnter and closeSubMenuOnMouseLeave are true', () => {
     it('toggles when mouse enter and leave', () => {
       const { container } = render(
@@ -496,8 +521,14 @@ 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');
   });
 });
 /* eslint-enable */