浏览代码

fix: Fixed the placeHolder of TreeSelect is blocked when the search box is in trigger, single selection

zhangyumei.0319 11 月之前
父节点
当前提交
41b2a3dc1f

+ 4 - 1
packages/semi-foundation/treeSelect/treeSelect.scss

@@ -165,7 +165,6 @@ $module: #{$prefix}-tree-select;
             
             &-placeholder {
                 opacity: .6;
-                z-index: -1;
             }
 
             &-disabled {
@@ -174,6 +173,10 @@ $module: #{$prefix}-tree-select;
             }
         }
 
+        .#{$module}-triggerSingleSearch-upper {
+            z-index: 1;
+        }
+
         .#{$module}-triggerSingleSearch-wrapper{
             width: 100%;
 

+ 2 - 2
packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -494,7 +494,7 @@ Searchable.story = {
 };
 
 export const SearchPosition = () => (
-  <>
+  <div style={{ background: 'var(--semi-color-bg-0)'}}>
     <TreeSelect
       searchPosition="trigger"
       style={{ width: 300 }}
@@ -540,7 +540,7 @@ export const SearchPosition = () => (
       maxTagCount={1}
       placeholder="maxTagCount=1"
     />
-  </>
+  </div>
 );
 
 SearchPosition.story = {

+ 2 - 1
packages/semi-ui/treeSelect/index.tsx

@@ -1288,12 +1288,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             disabled,
             preventScroll,
         } = this.props;
+        const { inputValue, inputTriggerFocus } = this.state;
         const isDropdownPositionSearch = searchPosition === strings.SEARCH_POSITION_DROPDOWN;
         const inputcls = cls({
             [`${prefixTree}-input`]: isDropdownPositionSearch,
             [`${prefixcls}-inputTrigger`]: !isDropdownPositionSearch
         });
-        const { inputValue } = this.state;
         const baseInputProps = {
             value: inputValue,
             className: inputcls,
@@ -1314,6 +1314,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const wrapperCls = cls({
             [`${prefixTree}-search-wrapper`]: isDropdownPositionSearch,
             [`${prefixcls}-triggerSingleSearch-wrapper`]: !isDropdownPositionSearch && !multiple,
+            [`${prefixcls}-triggerSingleSearch-upper`]: !isDropdownPositionSearch && inputTriggerFocus,
         });
         const useCusSearch = typeof searchRender === 'function' || typeof searchRender === 'boolean';
         if (useCusSearch && !searchRender) {