Merge pull request #2292 from DouyinFE/fix/treeSelect-tooltip

fix: [TreeSelect] fix when single select, searchable, search box in t…
DouyinFE · Jun 15, 2024 · 0a6d387 · 0a6d387
2 parents cfa655a + 204d239
commit 0a6d387
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/packages/semi-foundation/treeSelect/foundation.ts b/packages/semi-foundation/treeSelect/foundation.ts
@@ -455,6 +455,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._registerClickOutsideHandler();
     }
 
+    onClickSingleTriggerSearchItem = (e: any) => {
+        this.focusInput(true);
+    }
+
     // Scenes that may trigger blur
     //  1、clickOutSide
     //  2、click option / press enter, and then select complete（when multiple is false

diff --git a/packages/semi-foundation/treeSelect/treeSelect.scss b/packages/semi-foundation/treeSelect/treeSelect.scss
@@ -165,6 +165,7 @@ $module: #{$prefix}-tree-select;
 
             &-placeholder {
                 opacity: .6;
+                z-index: -1;
             }
 
             &-disabled {

diff --git a/packages/semi-ui/treeSelect/index.tsx b/packages/semi-ui/treeSelect/index.tsx
@@ -931,7 +931,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-selection-TriggerSearchItem-disabled`]: disabled,
         });
         return (
-            <span className={spanCls}>
+            <span className={spanCls} onClick={this.foundation.onClickSingleTriggerSearchItem}>
                 {renderText ? renderText : placeholder}
             </span>
         );
@@ -944,8 +944,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const { inputValue } = this.state;
         return (
             <>
-                {!inputValue && this.renderSingleTriggerSearchItem()}
                 {this.renderInput()}
+                {!inputValue && this.renderSingleTriggerSearchItem()}
             </>
         );
     };