From c646fe9a9c27878df7727302ae55c48973d4b325 Mon Sep 17 00:00:00 2001
From: pointhalo <88709023+pointhalo@users.noreply.github.com>
Date: Wed, 29 May 2024 16:55:28 +0800
Subject: [PATCH] fix: select option didn't pass data-* attribute (#2258)

---
 packages/semi-ui/select/_story/select.stories.jsx | 14 +++++++-------
 packages/semi-ui/select/option.tsx                |  4 +++-
 packages/semi-ui/select/optionGroup.tsx           |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/semi-ui/select/_story/select.stories.jsx b/packages/semi-ui/select/_story/select.stories.jsx
index 36fed5b446..7b1241675c 100644
--- a/packages/semi-ui/select/_story/select.stories.jsx
+++ b/packages/semi-ui/select/_story/select.stories.jsx
@@ -123,11 +123,11 @@ const AutoFocusDemo = () => {
         onFocus={() => console.log('onFocus')}
         onBlur={() => console.log('onBlur')}
       >
-        <Option value="abc">抖音</Option>
-        <Option value="hotsoon">火山</Option>
-        <Option value="pipixia">皮皮虾</Option>
-        <Option value="duoshan">多闪</Option>
-        <Option value="xigua">西瓜视频</Option>
+        <Option value="abc" data-test-id='douyin' data-shortcut='dy'>抖音</Option>
+        <Option value="hotsoon" data-test-id='hotsoon'>火山</Option>
+        <Option value="capcut" data-test-id='capcut'>剪映</Option>
+        <Option value="duoshan" data-test-id='duoshan'>多闪</Option>
+        <Option value="xigua" data-test-id='xigua'>西瓜视频</Option>
       </Select>
       <div className="test-div">test-div</div>
     </>
@@ -2201,9 +2201,9 @@ class OptionGroupDemo extends React.Component {
 
   renderGroup(group, index) {
     const options = group.children.map(option => (
-      <Select.Option value={option.value} label={option.label} key={option.label} />
+      <Select.Option value={option.value} label={option.label} key={option.label} data-test-id={option.label} />
     ));
-    return <Select.OptGroup key={`${index}-${group.label}`} label={group.label}>{options}</Select.OptGroup>;
+    return <Select.OptGroup key={`${index}-${group.label}`} label={group.label} data-test-id={group.label}>{options}</Select.OptGroup>;
   }
 
   render() {
diff --git a/packages/semi-ui/select/option.tsx b/packages/semi-ui/select/option.tsx
index 607be94662..0ff377f2c7 100644
--- a/packages/semi-ui/select/option.tsx
+++ b/packages/semi-ui/select/option.tsx
@@ -7,7 +7,8 @@ import LocaleConsumer from '../locale/localeConsumer';
 import { IconTick } from '@douyinfe/semi-icons';
 import { getHighLightTextHTML } from '../_utils/index';
 import { Locale } from '../locale/interface';
-import { BasicOptionProps } from '@douyinfe/semi-foundation/select/optionFoundation';
+import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
+import type { BasicOptionProps } from '@douyinfe/semi-foundation/select/optionFoundation';
 
 export interface OptionProps extends BasicOptionProps {
     [x: string]: any;
@@ -151,6 +152,7 @@ class Option extends PureComponent<OptionProps> {
                 aria-selected={selected ? "true" : "false"}
                 aria-disabled={disabled ? "true" : "false"}
                 style={style}
+                {...getDataAttr(rest)}
             >
                 {showTick ? (
                     <div className={selectedIconClassName}>
diff --git a/packages/semi-ui/select/optionGroup.tsx b/packages/semi-ui/select/optionGroup.tsx
index bcff90a9a1..f51ddfbdc4 100644
--- a/packages/semi-ui/select/optionGroup.tsx
+++ b/packages/semi-ui/select/optionGroup.tsx
@@ -24,7 +24,7 @@ class OptionGroup extends BaseComponent<OptionGroupProps> {
     };
 
     render() {
-        const { label, className, style } = this.props;
+        const { label, className, style, ...rest } = this.props;
         const groupCls = cls(className, {
             [prefixCls]: true,
         });
@@ -32,7 +32,7 @@ class OptionGroup extends BaseComponent<OptionGroupProps> {
             return null;
         }
         return (
-            <div className={groupCls} style={style}>
+            <div className={groupCls} style={style} {...this.getDataAttr(rest)}>
                 {label}
             </div>
         );