@douyinfe/semi-foundation 2.23.4 → 2.23.6

package/cascader/cascader.scss

@@ -159,23 +159,47 @@ $module: #{$prefix}-cascader;
             background: transparent;
             margin-left: $spacing-cascader_selection_tagInput-marginLeft;
         }
-
+        
         .#{$prefix}-tagInput {
+            &-wrapper {
+                &-default {
+                    min-height: $height-cascader_selection_tagInput_wrapper_default;
+                }
+    
+                &-small {
+                    min-height: $height-cascader_selection_tagInput_wrapper_small;
+                }
+    
+                &-large {
+                    min-height: $height-cascader_selection_tagInput_wrapper_large;
+                }
+            }
+
             .#{$prefix}-input-wrapper {
-                height: $height-cascader_selection_tagInput_input_default;
+                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
                     padding-left: 0;
                 }
-            }
 
-            .#{$prefix}-input-wrapper-small {
-                height: $height-cascader_selection_tagInput_input_small;
-            }
-            .#{$prefix}-input-wrapper-large {
-                height: $height-cascader_selection_tagInput_input_large;
+                &-default {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
+    
+                &-large {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
             }
+
+            // .#{$prefix}-input-wrapper-small {
+            //     height: $height-cascader_selection_tagInput_input_small;
+            // }
+            // .#{$prefix}-input-wrapper-large {
+            //     height: $height-cascader_selection_tagInput_input_large;
+            // }
         }
 
         &-text {

package/cascader/variables.scss

@@ -93,9 +93,9 @@ $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
-$height-cascader_selection_tagInput_input_small: 22px;
-$height-cascader_selection_tagInput_input_default: 30px;
-$height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
+$height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
+$height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
 $height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距

package/form/foundation.ts

@@ -8,7 +8,7 @@ import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-vi
 
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 
-export { BaseFormAdapter };
+export type { BaseFormAdapter };
 
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
 

package/lib/cjs/cascader/cascader.css

@@ -136,18 +136,28 @@
   background: transparent;
   margin-left: -4px;
 }
+.semi-cascader-selection .semi-tagInput-wrapper-default {
+  min-height: 30px;
+}
+.semi-cascader-selection .semi-tagInput-wrapper-small {
+  min-height: 22px;
+}
+.semi-cascader-selection .semi-tagInput-wrapper-large {
+  min-height: 38px;
+}
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {
-  height: 30px;
   margin-left: 4px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input {
   padding-left: 0;
 }
-.semi-cascader-selection .semi-tagInput .semi-input-wrapper-small {
-  height: 22px;
+.semi-cascader-selection .semi-tagInput .semi-input-wrapper-default {
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large {
-  height: 38px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-cascader-selection-text-inactive {
   color: var(--semi-color-text-2);

package/lib/cjs/cascader/cascader.scss

@@ -159,23 +159,47 @@ $module: #{$prefix}-cascader;
             background: transparent;
             margin-left: $spacing-cascader_selection_tagInput-marginLeft;
         }
-
+        
         .#{$prefix}-tagInput {
+            &-wrapper {
+                &-default {
+                    min-height: $height-cascader_selection_tagInput_wrapper_default;
+                }
+    
+                &-small {
+                    min-height: $height-cascader_selection_tagInput_wrapper_small;
+                }
+    
+                &-large {
+                    min-height: $height-cascader_selection_tagInput_wrapper_large;
+                }
+            }
+
             .#{$prefix}-input-wrapper {
-                height: $height-cascader_selection_tagInput_input_default;
+                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
                     padding-left: 0;
                 }
-            }
 
-            .#{$prefix}-input-wrapper-small {
-                height: $height-cascader_selection_tagInput_input_small;
-            }
-            .#{$prefix}-input-wrapper-large {
-                height: $height-cascader_selection_tagInput_input_large;
+                &-default {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
+    
+                &-large {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
             }
+
+            // .#{$prefix}-input-wrapper-small {
+            //     height: $height-cascader_selection_tagInput_input_small;
+            // }
+            // .#{$prefix}-input-wrapper-large {
+            //     height: $height-cascader_selection_tagInput_input_large;
+            // }
         }
 
         &-text {

package/lib/cjs/cascader/variables.scss

@@ -93,9 +93,9 @@ $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
-$height-cascader_selection_tagInput_input_small: 22px;
-$height-cascader_selection_tagInput_input_default: 30px;
-$height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
+$height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
+$height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
 $height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距

package/lib/cjs/form/foundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation from '../base/foundation';
 import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
-export { BaseFormAdapter };
+export type { BaseFormAdapter };
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     data: FormState;
     fields: Map<string, FieldStaff>;

package/lib/cjs/select/foundation.d.ts

@@ -42,6 +42,10 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     getActiveElement(): any;
     setIsFocusInContainer(isFocusInContainer: boolean): void;
     getIsFocusInContainer(): boolean;
+    on(eventName: string, eventCallback: () => void): void;
+    off(eventName: string): void;
+    emit(eventName: string): void;
+    once(eventName: string, eventCallback: () => void): void;
 }
 declare type LabelValue = string | number;
 declare type PropValue = LabelValue | Record<string, any>;
@@ -67,7 +71,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handleClick(e: any): void;
     open(acInput?: string, originalOptions?: BasicOptionProps[]): void;
     toggle2SearchInput(isShow: boolean): void;
-    close(e?: any): void;
+    close(e?: any, closeCb?: () => void): void;
     onSelect(option: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent): void;
     _handleSingleSelect({ value, label, ...rest }: BasicOptionProps, event: any): void;
     _handleMultipleSelect({ value, label, ...rest }: BasicOptionProps, event: MouseEvent | KeyboardEvent): void;
@@ -126,5 +130,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     checkMultipleProps(props?: Record<string, any>): void;
     updateScrollTop(): void;
     updateIsFullTags(): void;
+    handlePopoverClose(): void;
 }
 export {};

package/lib/cjs/select/foundation.js

@@ -430,16 +430,8 @@ class SelectFoundation extends _foundation.default {
     }
   }
 
-  close(e) {
+  close(e, closeCb) {
     // to support A11y, closing the panel trigger does not necessarily lose focus
-    const isFilterable = this._isFilterable();
-
-    if (isFilterable) {
-      // this.unBindKeyBoardEvent();
-      this.clearInput();
-      this.toggle2SearchInput(false);
-    }
-
     this._adapter.closeMenu();
 
     this._adapter.notifyDropdownVisibleChange(false);
@@ -450,6 +442,22 @@ class SelectFoundation extends _foundation.default {
 
     this._adapter.unregisterClickOutsideHandler(); // this._adapter.updateFocusState(false);
 
+
+    const isFilterable = this._isFilterable();
+
+    if (isFilterable) {
+      this.toggle2SearchInput(false);
+    }
+
+    this._adapter.once('popoverClose', () => {
+      if (isFilterable) {
+        this.clearInput();
+      }
+
+      if (closeCb) {
+        closeCb();
+      }
+    });
   }
 
   onSelect(option, optionIndex, event) {
@@ -493,21 +501,24 @@ class SelectFoundation extends _foundation.default {
       value,
       label
     }, rest)); // If it is a controlled component, directly notify
+    // Make sure that the operations of updating updateOptions are done after the animation ends
+    // otherwise the content will be updated when the popup layer is not collapsed, and it looks like it will flash once when it is closed
 
 
     if (this._isControlledComponent()) {
-      this._notifyChange(selections);
-
-      this.close(event);
+      this.close(event, () => {
+        this._notifyChange(selections);
+      });
     } else {
       this._adapter.updateSelection(selections); // notify user
 
 
-      this._notifyChange(selections); // Update the selected item in the drop-down box
-
+      this._notifyChange(selections);
 
-      this.close(event);
-      this.updateOptionsActiveStatus(selections);
+      this.close(event, () => {
+        // Update the selected item in the drop-down box
+        this.updateOptionsActiveStatus(selections);
+      });
     }
   }
 
@@ -1398,6 +1409,10 @@ class SelectFoundation extends _foundation.default {
     }
   }
 
+  handlePopoverClose() {
+    this._adapter.emit('popoverClose');
+  }
+
 }
 
 exports.default = SelectFoundation;

package/lib/cjs/switch/rtl.scss

@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
 
         &-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked-translateX);
+                transform: translateX(-$spacing-switch_checked-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
+                    transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
                 }
             }
         }
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
 
     .#{$module}-loading {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked-translateX);
+                transform: translateX(-$spacing-switch_spin_checked-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-small {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
         }
         &.#{$module}-checked{
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_small-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_small-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-large {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_large-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_large-translateX);
             }
         }
     }
 
     .#{$module}-large {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_unchecked_large-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_large-translateX);
+                transform: translateX(-$spacing-switch_checked_large-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
+                    transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
                 }
             }
         }
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
 
     .#{$module}-small {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_unchecked_small-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_small-translateX);
+                transform: translateX(-$spacing-switch_checked_small-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
+                    transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
                 }
             }
         }

package/lib/cjs/switch/switch.scss

@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
         }
 
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked-translateX);
+            transform: translateX($spacing-switch_checked-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked-translateX - $width-switch_knob_expand);
+                transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
             }
         }
     }
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked-translateX);
+        transform: translateX($spacing-switch_spin_unchecked-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-default;
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_spin_checked-bg-default;
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked-translateX);
+            transform: translateX($spacing-switch_spin_checked-translateX);
         }
     }
 }
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-small {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_small-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_small-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-small;
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked{
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_small-translateX);
+            transform: translateX($spacing-switch_spin_checked_small-translateX);
         }
     }
 }
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-large {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_large-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_large-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-large;
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked {
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_large-translateX);
+            transform: translateX($spacing-switch_spin_checked_large-translateX);
         }
     }
 }
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large;
         top: $spacing-switch_knob_large-padding;
         border-radius: $width-switch_knob_large * 0.5;
-        transform: translateX($motion-switch_unchecked_large-translateX);
+        transform: translateX($spacing-switch_unchecked_large-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_large-translateX);
+            transform: translateX($spacing-switch_checked_large-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_large-translateX - $motion-switch_expand_large-translateX);
+                transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
             }
         }
     }
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large_small;
         top: $spacing-switch_knob_small-padding;
         border-radius: $width-switch_knob_large_small * 0.5;
-        transform: translateX($motion-switch_unchecked_small-translateX);
+        transform: translateX($spacing-switch_unchecked_small-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_small-translateX);
+            transform: translateX($spacing-switch_checked_small-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_small-translateX - $motion-switch_expand_small-translateX);
+                transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
             }
         }
     }

package/lib/cjs/switch/variables.scss

@@ -1,18 +1,18 @@
 // Other
 $spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
-$motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
-$motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
-$motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
-$motion-switch_expand_large-translateX: 10px;
-$motion-switch_unchecked_large-translateX: 3px;
-$motion-switch_spin_unchecked_large-translateX: 2px;
-$motion-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
-$motion-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
-$motion-switch_expand_small-translateX: 2px;
-$motion-switch_unchecked_small-translateX: 1px;
-$motion-switch_spin_unchecked_small-translateX: 2px;
-$motion-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
-$motion-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
+$spacing-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量
+$spacing-switch_checked-translateX: 18px; // 选中开关右侧偏移量
+$spacing-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
+$spacing-switch_expand_large-translateX: 10px;
+$spacing-switch_unchecked_large-translateX: 3px; // 大尺寸未选中开关右侧偏移量
+$spacing-switch_spin_unchecked_large-translateX: 2px;  // 大尺寸未选中开关加载图标右侧偏移量
+$spacing-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
+$spacing-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
+$spacing-switch_expand_small-translateX: 2px;
+$spacing-switch_unchecked_small-translateX: 1px; // 小尺寸未选中开关右侧偏移量
+$spacing-switch_spin_unchecked_small-translateX: 2px; // 小尺寸未选中开关加载图标右侧偏移量
+$spacing-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
+$spacing-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
 $motion-switch-transitionDuration: 200ms; // 开关动画时长
 
 // Color
@@ -48,11 +48,11 @@ $width-switch_knob_active: $width-switch_knob_default + $width-switch_knob_expan
 $height-switch_large: 32px; // 大尺寸开关高度
 $width-switch_large: 54px; // 大尺寸开关宽度
 $width-switch_knob_large: 24px; // 大尺寸开关按钮宽度
-$width-switch_knob_large_active: $width-switch_knob_large + $motion-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
+$width-switch_knob_large_active: $width-switch_knob_large + $spacing-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
 $height-switch_small: 16px; // 小尺寸开关高度
 $width-switch_small: 26px; // 小尺寸开关宽度
 $width-switch_knob_large_small: 12px; // 小尺寸开关按钮宽度
-$width-switch_knob_small_active: $width-switch_knob_large_small + $motion-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
+$width-switch_knob_small_active: $width-switch_knob_large_small + $spacing-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
 $width-switch_knob_disabled-border: 1px; // 小尺寸开关按钮宽度
 $width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
 $width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度

package/lib/cjs/tagInput/tagInput.css

@@ -134,7 +134,6 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input {
   flex-grow: 1;
   width: min-content;
-  min-width: 38px;
   border: none;
   outline: none;
   background-color: transparent;

package/lib/cjs/tagInput/tagInput.scss

@@ -169,7 +169,7 @@ $module: #{$prefix}-tagInput;
         & &-input {
             flex-grow: 1;
             width: min-content;
-            min-width: 38px;
+            // min-width: 38px;
             border: none;
             outline: none;
             background-color: transparent;

package/lib/cjs/tooltip/foundation.js

@@ -1142,23 +1142,26 @@ class Tooltip extends _foundation.default {
 
 
       if (this.isTB(position)) {
-        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow; // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
+        // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make width overflow to offset the wrapper
 
         if (position === 'top' || position === 'bottom') {
-          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf || clientRight < 0 || restClientRight < 0;
         } else {
-          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide || clientRight < 0 || restClientRight < 0;
         }
       } // 左右方向 left and right
 
 
       if (this.isLR(position)) {
-        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow; // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
+        // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
 
         if (position === 'left' || position === 'right') {
-          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf || clientTop < 0 || restClientTop < 0;
         } else {
-          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide || clientTop < 0 || restClientTop < 0;
         }
       }
     }

package/lib/cjs/treeSelect/treeSelect.css

@@ -144,17 +144,25 @@
   padding-left: 4px;
   padding-right: 4px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper {
-  height: 30px;
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
+  min-height: 30px;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+  min-height: 22px;
+}
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+  min-height: 38px;
 }
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-small {
-  height: 22px;
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-default {
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-large {
-  height: 38px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput {
   margin-left: -4px;