From 21d67178f9f31bd3067a921e205a8a04b59db30a Mon Sep 17 00:00:00 2001
From: madocto <hi.madocto@gmail.com>
Date: Mon, 18 Mar 2024 18:38:13 +0800
Subject: [PATCH 1/4] fix: key type mismatch

---
 src/utils/nodeUtil.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/utils/nodeUtil.tsx b/src/utils/nodeUtil.tsx
index eac86f49..77fa9a4d 100644
--- a/src/utils/nodeUtil.tsx
+++ b/src/utils/nodeUtil.tsx
@@ -12,6 +12,7 @@ function convertItemsToNodes(list: ItemType[]) {
     .map((opt, index) => {
       if (opt && typeof opt === 'object') {
         const { label, children, key, type, ...restProps } = opt as any;
+        const mergeProps = { ...restProps, eventKey: key };
         const mergedKey = key ?? `tmp-${index}`;
 
         // MenuItemGroup & SubMenuItem
@@ -19,7 +20,7 @@ function convertItemsToNodes(list: ItemType[]) {
           if (type === 'group') {
             // Group
             return (
-              <MenuItemGroup key={mergedKey} {...restProps} title={label}>
+              <MenuItemGroup key={mergedKey} {...mergeProps} title={label}>
                 {convertItemsToNodes(children)}
               </MenuItemGroup>
             );
@@ -27,7 +28,7 @@ function convertItemsToNodes(list: ItemType[]) {
 
           // Sub Menu
           return (
-            <SubMenu key={mergedKey} {...restProps} title={label}>
+            <SubMenu key={mergedKey} {...mergeProps} title={label}>
               {convertItemsToNodes(children)}
             </SubMenu>
           );
@@ -35,11 +36,11 @@ function convertItemsToNodes(list: ItemType[]) {
 
         // MenuItem & Divider
         if (type === 'divider') {
-          return <Divider key={mergedKey} {...restProps} />;
+          return <Divider key={mergedKey} {...mergeProps} />;
         }
 
         return (
-          <MenuItem key={mergedKey} {...restProps}>
+          <MenuItem key={mergedKey} {...mergeProps}>
             {label}
           </MenuItem>
         );

From 7c0e9fa0e5b6dbf666804d1cb6ded4a4ca6607ba Mon Sep 17 00:00:00 2001
From: madocto <hi.madocto@gmail.com>
Date: Mon, 18 Mar 2024 23:17:14 +0800
Subject: [PATCH 2/4] test: add case

---
 tests/Options.spec.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/tests/Options.spec.tsx b/tests/Options.spec.tsx
index cc7bf8c7..2efa23db 100644
--- a/tests/Options.spec.tsx
+++ b/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 */

From 434bcab3be6afd12ee259b1500d15ab734626965 Mon Sep 17 00:00:00 2001
From: madocto <hi.madocto@gmail.com>
Date: Tue, 19 Mar 2024 10:43:55 +0800
Subject: [PATCH 3/4] feat: improve props

---
 src/utils/nodeUtil.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/utils/nodeUtil.tsx b/src/utils/nodeUtil.tsx
index 77fa9a4d..1e46df38 100644
--- a/src/utils/nodeUtil.tsx
+++ b/src/utils/nodeUtil.tsx
@@ -12,15 +12,16 @@ function convertItemsToNodes(list: ItemType[]) {
     .map((opt, index) => {
       if (opt && typeof opt === 'object') {
         const { label, children, key, type, ...restProps } = opt as any;
-        const mergeProps = { ...restProps, eventKey: key };
         const mergedKey = key ?? `tmp-${index}`;
+        // The type of `key` changes, `eventKey` is the original value
+        const mergeProps = { ...restProps, key: mergedKey, eventKey: mergedKey };
 
         // MenuItemGroup & SubMenuItem
         if (children || type === 'group') {
           if (type === 'group') {
             // Group
             return (
-              <MenuItemGroup key={mergedKey} {...mergeProps} title={label}>
+              <MenuItemGroup {...mergeProps} title={label}>
                 {convertItemsToNodes(children)}
               </MenuItemGroup>
             );
@@ -28,7 +29,7 @@ function convertItemsToNodes(list: ItemType[]) {
 
           // Sub Menu
           return (
-            <SubMenu key={mergedKey} {...mergeProps} title={label}>
+            <SubMenu {...mergeProps} title={label}>
               {convertItemsToNodes(children)}
             </SubMenu>
           );
@@ -36,11 +37,11 @@ function convertItemsToNodes(list: ItemType[]) {
 
         // MenuItem & Divider
         if (type === 'divider') {
-          return <Divider key={mergedKey} {...mergeProps} />;
+          return <Divider {...mergeProps} />;
         }
 
         return (
-          <MenuItem key={mergedKey} {...mergeProps}>
+          <MenuItem {...mergeProps}>
             {label}
           </MenuItem>
         );

From 606fa0e7faa8d54bb7dc4062502303989829f594 Mon Sep 17 00:00:00 2001
From: madocto <hi.madocto@gmail.com>
Date: Fri, 22 Mar 2024 13:11:12 +0800
Subject: [PATCH 4/4] feat: improve props

---
 src/utils/nodeUtil.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/nodeUtil.tsx b/src/utils/nodeUtil.tsx
index 1e46df38..51dd7d47 100644
--- a/src/utils/nodeUtil.tsx
+++ b/src/utils/nodeUtil.tsx
@@ -14,7 +14,7 @@ function convertItemsToNodes(list: ItemType[]) {
         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 = { ...restProps, key: mergedKey, eventKey: mergedKey };
+        const mergeProps = { key: mergedKey, eventKey: mergedKey, ...restProps, };
 
         // MenuItemGroup & SubMenuItem
         if (children || type === 'group') {