fix: key type mismatch

src/utils/nodeUtil.tsx

@@ -13,33 +13,35 @@ function convertItemsToNodes(list: ItemType[]) {
       if (opt && typeof opt === 'object') {
         const { label, children, key, type, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
+        // The type of `key` changes, `eventKey` is the original value
+        const mergeProps = { key: mergedKey, eventKey: mergedKey, ...restProps, };
 
         // MenuItemGroup & SubMenuItem
         if (children || type === 'group') {
           if (type === 'group') {
             // Group
             return (
-              <MenuItemGroup key={mergedKey} {...restProps} title={label}>
+              <MenuItemGroup {...mergeProps} title={label}>
                 {convertItemsToNodes(children)}
               </MenuItemGroup>
             );
           }
 
           // Sub Menu
           return (
-            <SubMenu key={mergedKey} {...restProps} title={label}>
+            <SubMenu {...mergeProps} title={label}>
               {convertItemsToNodes(children)}
             </SubMenu>
           );
         }
 
         // MenuItem & Divider
         if (type === 'divider') {
-          return <Divider key={mergedKey} {...restProps} />;
+          return <Divider {...mergeProps} />;
         }
 
         return (
-          <MenuItem key={mergedKey} {...restProps}>
+          <MenuItem {...mergeProps}>
             {label}
           </MenuItem>
         );

tests/Options.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import Menu from '../src';
 
@@ -41,5 +41,35 @@ describe('Options', () => {
 
     expect(container.children).toMatchSnapshot();
   });
+
+  it('key type is matched', () => {
+    const onSelect = jest.fn();
+
+    const { container } = render(
+      <Menu
+        items={[
+          {
+            label: 'Menu Item 1',
+            key: "1",
+          },
+          {
+            label: 'Menu Item 2',
+            key: 2,
+          },
+        ]}
+        onSelect={onSelect}
+      />,
+    );
+
+    fireEvent.click(container.querySelectorAll('.rc-menu-item')[0]);
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ selectedKeys: ['1'] }),
+    );
+
+    fireEvent.click(container.querySelectorAll('.rc-menu-item')[1]);
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ selectedKeys: [2] }),
+    );
+  });
 });
 /* eslint-enable */