fix: select option didn't pass data-* attribute (#2258)

DouyinFE · May 29, 2024 · c646fe9 · c646fe9
1 parent db63f22
commit c646fe9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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
@@ -24,15 +24,15 @@ 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,
         });
         if (!label && typeof label !== 'number') {
             return null;
         }
         return (
-            <div className={groupCls} style={style}>
+            <div className={groupCls} style={style} {...this.getDataAttr(rest)}>
                 {label}
             </div>
         );