fix: fix Selct, Cascader suffix icon style error (#2493)

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import CustomTrigger from './CustomTrigger';
-import { IconChevronDown, IconClose } from '@douyinfe/semi-icons';
+import { IconChevronDown, IconClose, IconGift } from '@douyinfe/semi-icons';
 import { Button, Typography, Toast, Cascader, Checkbox, Input, Tag, TagInput } from '../../index';
 
 const { Text } = Typography;
@@ -2397,3 +2397,53 @@ export const SearchInTopSlot = () => {
       />
   );
 }
+
+export const suffix = () => {
+  const treeData = [
+    {
+        label: '浙江省',
+        value: 'zhejiang',
+        children: [
+            {
+                label: '杭州市',
+                value: 'hangzhou',
+                children: [
+                    {
+                        label: '西湖区',
+                        value: 'xihu',
+                    },
+                    {
+                        label: '萧山区',
+                        value: 'xiaoshan',
+                    },
+                    {
+                        label: '临安区',
+                        value: 'linan',
+                    },
+                ],
+            },
+            {
+                label: '宁波市',
+                value: 'ningbo',
+                children: [
+                    {
+                        label: '海曙区',
+                        value: 'haishu',
+                    },
+                    {
+                        label: '江北区',
+                        value: 'jiangbei',
+                    }
+                ]
+            },
+        ],
+    }
+  ];
+
+  return (<Cascader
+    suffix={<IconGift />}
+    style={{ width: 300 }}
+    treeData={treeData}
+    placeholder="请选择所在地区"
+  />);
+}

packages/semi-ui/cascader/index.tsx

@@ -1014,8 +1014,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 <Fragment key={'selection'}>
                     <div className={sectionCls}>{this.renderSelectContent()}</div>
                 </Fragment>,
-                <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
                 <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
+                <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
                 <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
             ];
         /**

packages/semi-ui/select/index.tsx

@@ -1431,11 +1431,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                             this.renderSingleSelection(selections, filterable)}
                     </div>
                 </Fragment>,
+                <Fragment key="suffix">{suffix ? this.renderSuffix() : null}</Fragment>,
                 <Fragment key="clearicon">
                     {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                     {showClear ? (<div className={cls(`${prefixcls}-clear`)} onClick={this.onClear}>{clear}</div>) : arrowContent}
                 </Fragment>,
-                <Fragment key="suffix">{suffix ? this.renderSuffix() : null}</Fragment>,
             ]
         );