@douyinfe/semi-foundation 2.23.5 → 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/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/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/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;

package/lib/cjs/treeSelect/treeSelect.scss

@@ -172,24 +172,46 @@ $module: #{$prefix}-tree-select;
             border: hidden;
             background: transparent;
 
-            .#{$prefix}-tagInput-wrapper{
+            .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                .#{$prefix}-input-wrapper {
-                    height: $height-treeSelect_selection_tagInput_input_default;
+                &-default {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+                }
     
+                &-small {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+                }
+
+                &-large {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+                }
+
+                .#{$prefix}-input-wrapper {
+                    // height: $height-treeSelect_selection_tagInput_input_default;
+
                     .#{$prefix}-input {
                         padding-left: 0;
                     }
+
+                    &-default {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
+        
+                    &-large {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
                 }
     
-                .#{$prefix}-input-wrapper-small {
-                    height: $height-treeSelect_selection_tagInput_input_small;
-                }
-                .#{$prefix}-input-wrapper-large {
-                    height: $height-treeSelect_selection_tagInput_input_large;
-                }
+                // .#{$prefix}-input-wrapper-small {
+                //     height: $height-treeSelect_selection_tagInput_input_small;
+                // }
+                // .#{$prefix}-input-wrapper-large {
+                //     height: $height-treeSelect_selection_tagInput_input_large;
+                // }
             }
         }
     }

package/lib/cjs/treeSelect/variables.scss

@@ -87,6 +87,6 @@ $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度
 $height-treeSelect_popover: 300px; // 树选择器菜单高度
-$height-treeSelect_selection_tagInput_input_small: 22px; // 树选择器多选标签高度 - 小尺寸
-$height-treeSelect_selection_tagInput_input_default: 30px; // 树选择器多选标签高度 - 默认尺寸
-$height-treeSelect_selection_tagInput_input_large: 38px; // 树选择器多选标签高度 - 大尺寸
+$height-treeSelect_selection_tagInput_wrapper_small: 22px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
+$height-treeSelect_selection_tagInput_wrapper_default: 30px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
+$height-treeSelect_selection_tagInput_wrapper_large: 38px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸

package/lib/cjs/utils/Event.d.ts

@@ -2,6 +2,6 @@ export default class Event {
     _eventMap: Map<string, ((...arg: any) => void)[]>;
     on(event: string, callback: (...arg: any) => void): this;
     once(event: string, callback: (...arg: any) => void): void;
-    off(event: string, callback: null | (() => void)): this;
+    off(event: string, callback?: null | (() => void)): this;
     emit(event: string, ...args: any[]): boolean;
 }

package/lib/es/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/es/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/es/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/es/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/es/select/foundation.js

@@ -408,16 +408,8 @@ export default class SelectFoundation extends BaseFoundation {
     }
   }
 
-  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);
@@ -428,6 +420,22 @@ export default class SelectFoundation extends BaseFoundation {
 
     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) {
@@ -471,21 +479,24 @@ export default class SelectFoundation extends BaseFoundation {
       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);
+      });
     }
   }
 
@@ -1376,4 +1387,8 @@ export default class SelectFoundation extends BaseFoundation {
     }
   }
 
+  handlePopoverClose() {
+    this._adapter.emit('popoverClose');
+  }
+
 }

package/lib/es/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/es/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/es/tooltip/foundation.js

@@ -1132,23 +1132,26 @@ export default class Tooltip extends BaseFoundation {
 
 
       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/es/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;

package/lib/es/treeSelect/treeSelect.scss

@@ -172,24 +172,46 @@ $module: #{$prefix}-tree-select;
             border: hidden;
             background: transparent;
 
-            .#{$prefix}-tagInput-wrapper{
+            .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                .#{$prefix}-input-wrapper {
-                    height: $height-treeSelect_selection_tagInput_input_default;
+                &-default {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+                }
     
+                &-small {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+                }
+
+                &-large {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+                }
+
+                .#{$prefix}-input-wrapper {
+                    // height: $height-treeSelect_selection_tagInput_input_default;
+
                     .#{$prefix}-input {
                         padding-left: 0;
                     }
+
+                    &-default {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
+        
+                    &-large {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
                 }
     
-                .#{$prefix}-input-wrapper-small {
-                    height: $height-treeSelect_selection_tagInput_input_small;
-                }
-                .#{$prefix}-input-wrapper-large {
-                    height: $height-treeSelect_selection_tagInput_input_large;
-                }
+                // .#{$prefix}-input-wrapper-small {
+                //     height: $height-treeSelect_selection_tagInput_input_small;
+                // }
+                // .#{$prefix}-input-wrapper-large {
+                //     height: $height-treeSelect_selection_tagInput_input_large;
+                // }
             }
         }
     }

package/lib/es/treeSelect/variables.scss

@@ -87,6 +87,6 @@ $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度
 $height-treeSelect_popover: 300px; // 树选择器菜单高度
-$height-treeSelect_selection_tagInput_input_small: 22px; // 树选择器多选标签高度 - 小尺寸
-$height-treeSelect_selection_tagInput_input_default: 30px; // 树选择器多选标签高度 - 默认尺寸
-$height-treeSelect_selection_tagInput_input_large: 38px; // 树选择器多选标签高度 - 大尺寸
+$height-treeSelect_selection_tagInput_wrapper_small: 22px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
+$height-treeSelect_selection_tagInput_wrapper_default: 30px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
+$height-treeSelect_selection_tagInput_wrapper_large: 38px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸

package/lib/es/utils/Event.d.ts

@@ -2,6 +2,6 @@ export default class Event {
     _eventMap: Map<string, ((...arg: any) => void)[]>;
     on(event: string, callback: (...arg: any) => void): this;
     once(event: string, callback: (...arg: any) => void): void;
-    off(event: string, callback: null | (() => void)): this;
+    off(event: string, callback?: null | (() => void)): this;
     emit(event: string, ...args: any[]): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.23.5",
+    "version": "2.23.6",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c3cd98419912c96831a20c5a9f8ce33295b19d5d",
+    "gitHead": "d6064611e073d549b28c0ba5395bff3efd74e0ad",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -50,7 +50,11 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     getFocusableElements(node: any): any[];
     getActiveElement(): any;
     setIsFocusInContainer(isFocusInContainer: boolean): void;
-    getIsFocusInContainer(): boolean
+    getIsFocusInContainer(): boolean;
+    on(eventName: string, eventCallback: () => void): void;
+    off(eventName: string): void;
+    emit(eventName: string): void;
+    once(eventName: string, eventCallback: () => void): void
 }
 
 type LabelValue = string | number;
@@ -364,14 +368,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
     }
 
-    close(e?: any) {
+    close(e?: any, closeCb?: () => void) {
         // 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);
@@ -380,6 +378,20 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         // this._notifyBlur(e);
         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: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent) {
@@ -407,18 +419,22 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         const selections = new Map().set(label, { value, label, ...rest });
         // First trigger onSelect, then trigger onChange
         this._notifySelect(value, { 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.close(event);
-            this.updateOptionsActiveStatus(selections);
+
+            this.close(event, () => {
+                // Update the selected item in the drop-down box
+                this.updateOptionsActiveStatus(selections);
+            });
         }
     }
 
@@ -1093,4 +1109,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             });
         }
     }
+
+    handlePopoverClose() {
+        this._adapter.emit('popoverClose');
+    }
 }

package/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/tooltip/foundation.ts

@@ -1002,19 +1002,24 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             // 上下方向 top and bottom
             if (this.isTB(position)){
                 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;
+                // 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/treeSelect/treeSelect.scss

@@ -172,24 +172,46 @@ $module: #{$prefix}-tree-select;
             border: hidden;
             background: transparent;
 
-            .#{$prefix}-tagInput-wrapper{
+            .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                .#{$prefix}-input-wrapper {
-                    height: $height-treeSelect_selection_tagInput_input_default;
+                &-default {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+                }
     
+                &-small {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+                }
+
+                &-large {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+                }
+
+                .#{$prefix}-input-wrapper {
+                    // height: $height-treeSelect_selection_tagInput_input_default;
+
                     .#{$prefix}-input {
                         padding-left: 0;
                     }
+
+                    &-default {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
+        
+                    &-large {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
                 }
     
-                .#{$prefix}-input-wrapper-small {
-                    height: $height-treeSelect_selection_tagInput_input_small;
-                }
-                .#{$prefix}-input-wrapper-large {
-                    height: $height-treeSelect_selection_tagInput_input_large;
-                }
+                // .#{$prefix}-input-wrapper-small {
+                //     height: $height-treeSelect_selection_tagInput_input_small;
+                // }
+                // .#{$prefix}-input-wrapper-large {
+                //     height: $height-treeSelect_selection_tagInput_input_large;
+                // }
             }
         }
     }

package/treeSelect/variables.scss

@@ -87,6 +87,6 @@ $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度
 $height-treeSelect_popover: 300px; // 树选择器菜单高度
-$height-treeSelect_selection_tagInput_input_small: 22px; // 树选择器多选标签高度 - 小尺寸
-$height-treeSelect_selection_tagInput_input_default: 30px; // 树选择器多选标签高度 - 默认尺寸
-$height-treeSelect_selection_tagInput_input_large: 38px; // 树选择器多选标签高度 - 大尺寸
+$height-treeSelect_selection_tagInput_wrapper_small: 22px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
+$height-treeSelect_selection_tagInput_wrapper_default: 30px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
+$height-treeSelect_selection_tagInput_wrapper_large: 38px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸

package/utils/Event.ts

@@ -23,7 +23,7 @@ export default class Event {
         }
     }
 
-    off(event: string, callback: null | (() => void)) {
+    off(event: string, callback?: null | (() => void)) {
         if (event) {
             if (typeof callback === 'function') {
                 const callbacks = this._eventMap.get(event);