From f327bb91cde7dde8d9e28a9ac11cf623ea3fa89f Mon Sep 17 00:00:00 2001
From: pointhalo <point.halo@outlook.com>
Date: Wed, 1 Nov 2023 11:18:22 +0800
Subject: [PATCH 1/2] fix: select option never use key in jsx declare usage

---
 .../semi-ui/select/_story/select.stories.jsx   | 18 ++++++++++++++++++
 packages/semi-ui/select/utils.tsx              |  8 +++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/semi-ui/select/_story/select.stories.jsx b/packages/semi-ui/select/_story/select.stories.jsx
index 0004e07b53..22a3a592b0 100644
--- a/packages/semi-ui/select/_story/select.stories.jsx
+++ b/packages/semi-ui/select/_story/select.stories.jsx
@@ -3367,3 +3367,21 @@ class VirtualizeAllowCreate extends React.Component {
 
 // virtualize allowCreate + renderCreateItem, optionList render not as expected
 export const Fix1856 = () => (<VirtualizeAllowCreate />); 
+
+
+export const TestOptionKey = () => {
+  return <><Select style={{ width: 300 }}>
+      <Select.Option label='3' value='2' key='abc'></Select.Option>
+      <Select.Option label='2' value='3' key='efg'></Select.Option>
+      <Select.Option label='4' value='5'></Select.Option>
+      <Select.Option label='5' value='4'></Select.Option>
+    </Select>
+    <br/><br/>
+    <Select style={{ width: 300 }} optionList={[
+      { label: '1', value: '2', key: 'kkk' },
+      { label: '2', value: '3', key: 'jjj' },
+      { label: '3', value: '2' },
+    ]}>
+    </Select>
+  </>
+}
\ No newline at end of file
diff --git a/packages/semi-ui/select/utils.tsx b/packages/semi-ui/select/utils.tsx
index dafae03943..816d1ebee0 100644
--- a/packages/semi-ui/select/utils.tsx
+++ b/packages/semi-ui/select/utils.tsx
@@ -10,7 +10,7 @@ const generateOption = (child: React.ReactElement, parent: any, index: number):
     }
     const option = {
         value: childProps.value,
-        // Drop-down menu rendering priority label value, children, value in turn downgrade
+        // Dropdown menu rendering priority label value, children, value in turn downgrade
         label: childProps.label || childProps.children || childProps.value,
         _show: true,
         _selected: false,
@@ -18,6 +18,12 @@ const generateOption = (child: React.ReactElement, parent: any, index: number):
         ...childProps,
         _parentGroup: parent,
     };
+
+    // Props are collected from ReactNode, after React.Children.toArray
+    // no need to determine whether the key exists in child
+    // Even if the user does not explicitly declare it, React will always generate a key.
+    option.key = child.key;
+    
     return option;
 };
 

From 706c90f055e53d9d4ea6dbff27bc0a54f0969311 Mon Sep 17 00:00:00 2001
From: pointhalo <point.halo@outlook.com>
Date: Wed, 1 Nov 2023 12:01:10 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20avoid=20change=20onSelect=E3=80=81on?=
 =?UTF-8?q?Change=20params?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/semi-foundation/select/foundation.ts |  2 ++
 packages/semi-ui/select/index.tsx             | 18 +++++++++---------
 packages/semi-ui/select/utils.tsx             |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/semi-foundation/select/foundation.ts b/packages/semi-foundation/select/foundation.ts
index 70e211ede5..04fdf769fc 100644
--- a/packages/semi-foundation/select/foundation.ts
+++ b/packages/semi-foundation/select/foundation.ts
@@ -939,6 +939,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         delete newOption._show;
         delete newOption._selected;
         delete newOption._scrollIndex;
+        delete newOption._keyInJsx;
+        
         if ('_keyInOptionList' in newOption) {
             newOption.key = newOption._keyInOptionList;
             delete newOption._keyInOptionList;
diff --git a/packages/semi-ui/select/index.tsx b/packages/semi-ui/select/index.tsx
index 7e4eda4568..3d7fd2cc6a 100644
--- a/packages/semi-ui/select/index.tsx
+++ b/packages/semi-ui/select/index.tsx
@@ -181,14 +181,14 @@ export type SelectProps = {
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: PopoverProps
 } & Pick<
-    TooltipProps,
-    | 'spacing'
-    | 'getPopupContainer'
-    | 'motion'
-    | 'autoAdjustOverflow'
-    | 'mouseLeaveDelay'
-    | 'mouseEnterDelay'
-    | 'stopPropagation'
+TooltipProps,
+| 'spacing'
+| 'getPopupContainer'
+| 'motion'
+| 'autoAdjustOverflow'
+| 'mouseLeaveDelay'
+| 'mouseEnterDelay'
+| 'stopPropagation'
 > & React.RefAttributes<any>;
 
 export interface SelectState {
@@ -775,7 +775,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     focused={isFocused}
                     onMouseEnter={() => this.onOptionHover(optionIndex)}
                     style={optionStyle}
-                    key={option.key || option.label as string + option.value as string + optionIndex}
+                    key={option._keyInOptionList || option._keyInJsx || option.label as string + option.value as string + optionIndex}
                     renderOptionItem={renderOptionItem}
                     inputValue={inputValue}
                     semiOptionId={`${this.selectID}-option-${optionIndex}`}
diff --git a/packages/semi-ui/select/utils.tsx b/packages/semi-ui/select/utils.tsx
index 816d1ebee0..31bb403ac7 100644
--- a/packages/semi-ui/select/utils.tsx
+++ b/packages/semi-ui/select/utils.tsx
@@ -22,7 +22,7 @@ const generateOption = (child: React.ReactElement, parent: any, index: number):
     // Props are collected from ReactNode, after React.Children.toArray
     // no need to determine whether the key exists in child
     // Even if the user does not explicitly declare it, React will always generate a key.
-    option.key = child.key;
+    option._keyInJsx = child.key;
     
     return option;
 };