@douyinfe/semi-foundation 2.96.0 → 2.97.0

package/lib/es/overflowList/foundation.js

@@ -27,11 +27,21 @@ class OverflowListFoundation extends BaseFoundation {
     } = this.getProps();
     const {
       visibleState,
-      overflow
+      overflow,
+      scrollOverflow
     } = this.getStates();
     if (!this.isScrollMode()) {
       return overflow;
     }
+    // Scroll mode relies on IntersectionObserver to compute visibility.
+    // During recalculation (e.g. items changed, or before observer fires),
+    // keep last computed overflow to avoid UI flicker (tabs arrows/menu state).
+    if (!visibleState || visibleState.size === 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -40,11 +50,49 @@ class OverflowListFoundation extends BaseFoundation {
     });
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // If no item is visible (e.g. initial layout not ready or list out of viewport),
+    // treat it as "unknown" and keep last computed overflow to avoid wrong enabling.
+    if (visibleStart < 0 || visibleEnd < 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const overflowList = [];
     overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
     overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
     return overflowList;
   }
+  _syncScrollOverflowCache(nextVisibleState) {
+    if (!this.isScrollMode()) {
+      return;
+    }
+    const {
+      items
+    } = this.getProps();
+    const visibleStateArr = items.map(_ref2 => {
+      let {
+        key
+      } = _ref2;
+      return Boolean(nextVisibleState.get(key));
+    });
+    const visibleStart = visibleStateArr.indexOf(true);
+    const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // No visible items means the result is not reliable; keep cache and stay "calculating"
+    if (visibleStart < 0 || visibleEnd < 0) {
+      this._adapter.updateStates({
+        isScrollOverflowCalculating: true
+      });
+      return;
+    }
+    const overflowList = [];
+    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+    this._adapter.updateStates({
+      scrollOverflow: overflowList,
+      isScrollOverflowCalculating: false
+    });
+  }
   handleIntersect(entries) {
     const visibleState = copy(this.getState('visibleState'));
     const res = {};
@@ -73,6 +121,8 @@ class OverflowListFoundation extends BaseFoundation {
     }
     this.previousY = currentY;
     this._adapter.updateVisibleState(visibleState);
+    // Keep scroll overflow cache in sync for stable UI
+    this._syncScrollOverflowCache(visibleState);
     this._adapter.notifyIntersect(res);
   }
   handleCollapseOverflow() {

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

@@ -54,7 +54,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     constructor(adapter: SelectAdapter);
     _keydownHandler: (...arg: any[]) => void | null;
     init(): void;
-    focus(optionsForOpen?: BasicOptionProps[]): void;
+    focus(optionsForOpen?: BasicOptionProps[], openDropdown?: boolean): void;
     _focusTrigger(): void;
     destroy(): void;
     _setDropdownWidth(): void;

package/lib/es/select/foundation.js

@@ -37,15 +37,40 @@ export default class SelectFoundation extends BaseFoundation {
       this.focus(originalOptions);
     }
   }
-  focus(optionsForOpen) {
+  focus(optionsForOpen, openDropdown) {
     const isFilterable = this._isFilterable();
     const isMultiple = this._isMultiple();
     const {
       isOpen
     } = this.getStates();
+    const {
+      searchPosition
+    } = this.getProps();
+    // Default to true if not specified (backward compatibility)
+    const shouldOpenDropdown = openDropdown !== false;
     this._adapter.updateFocusState(true);
     this._adapter.setIsFocusInContainer(false);
     if (isFilterable) {
+      /**
+       * When openDropdown is false, we only want to "refocus" the Select
+       * without changing dropdown visibility.
+       *
+       * NOTE: For searchPosition='dropdown', the search input is rendered in dropdown,
+       * so we should NOT toggle trigger input(showInput) here, otherwise it may affect
+       * tabIndex / focusability unexpectedly.
+       */
+      if (!shouldOpenDropdown) {
+        if (searchPosition === strings.SEARCH_POSITION_TRIGGER) {
+          if (isMultiple) {
+            this.focusInput();
+          } else {
+            this.toggle2SearchInput(true);
+          }
+        } else {
+          this._focusTrigger();
+        }
+        return;
+      }
       if (isMultiple) {
         // when filter and multiple, focus input and open dropdown
         this.focusInput();
@@ -1083,7 +1108,8 @@ export default class SelectFoundation extends BaseFoundation {
       this.clearInput(e);
     }
     // after click showClear button, the select need to be focused
-    this.focus();
+    // but don't open dropdown to avoid focus state confusion
+    this.focus(undefined, false);
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();

package/lib/es/switch/switch.css

@@ -33,6 +33,7 @@
 }
 .semi-switch-checked .semi-switch-knob {
   transform: translateX(18px);
+  background-color: rgba(var(--semi-white), 1);
 }
 .semi-switch-checked:active .semi-switch-knob {
   transform: translateX(12px);

package/lib/es/switch/switch.scss

@@ -43,6 +43,7 @@ $module: #{$prefix}-switch;
 
         .#{$module}-knob {
             transform: translateX($spacing-switch_checked-translateX);
+            background-color: $color-switch_knob-bg-checked;
         }
 
         &:active {

package/lib/es/switch/variables.scss

@@ -30,7 +30,8 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 关闭态
+$color-switch_knob-bg-checked: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 开启态
 $color-switch_knob-border-default: var(--semi-color-border); // 开关滑块描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关文案颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关文案颜色

package/lib/es/table/foundation.js

@@ -881,7 +881,8 @@ class TableFoundation extends BaseFoundation {
     let e = arguments.length > 1 ? arguments[1] : undefined;
     let check = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var _a, _b, _c, _d;
-    this.stopPropagation(e);
+    /* Do not call stopPropagation here, otherwise the click event registered via onHeaderCell
+       will be blocked when the click hot area is the whole title (#1861). */
     /* if mouse down to the resizable handle, do not trigger the sorting，fix #2802
         The target of the click event may be different from the target of the mousedown,
         e.g: Press the mouse, move to another node and then release it，

package/lib/es/tag/tag.css

@@ -505,6 +505,32 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-split {
+  display: inline-flex;
+  align-items: center;
+}
+.semi-tag-split .semi-tag {
+  border-radius: 0;
+  margin-right: 1px;
+}
+.semi-tag-split .semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-tag-split .semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+  margin-right: unset;
+}
+.semi-tag-split .semi-tag-circle.semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-full);
+  border-bottom-left-radius: var(--semi-border-radius-full);
+}
+.semi-tag-split .semi-tag-circle.semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-full);
+  border-bottom-right-radius: var(--semi-border-radius-full);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/es/tag/tag.scss

@@ -329,4 +329,37 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
+.#{$module}-split {
+    display: inline-flex;
+    align-items: center;
+
+    .#{$module} {
+        border-radius: 0;
+        margin-right: 1px;
+
+        &-first {
+            border-top-left-radius: $radius-tag;
+            border-bottom-left-radius: $radius-tag;
+        }
+
+        &-last {
+            border-top-right-radius: $radius-tag;
+            border-bottom-right-radius: $radius-tag;
+            margin-right: unset;
+        }
+
+        &-circle {
+            &.#{$module}-first {
+                border-top-left-radius: $radius-tag_circle;
+                border-bottom-left-radius: $radius-tag_circle;
+            }
+
+            &.#{$module}-last {
+                border-top-right-radius: $radius-tag_circle;
+                border-bottom-right-radius: $radius-tag_circle;
+            }
+        }
+    }
+}
+
 @import './rtl.scss';

package/lib/es/tagInput/tagInput.css

@@ -112,6 +112,8 @@
   padding-left: 4px;
   padding-right: 4px;
   overflow: hidden;
+  position: relative;
+  /* hidden mirror used to measure input text width */
 }
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
@@ -154,6 +156,8 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input {
   flex-grow: 1;
   width: min-content;
+  min-width: 2px;
+  max-width: 100%;
   border: none;
   outline: none;
   background-color: transparent;
@@ -195,6 +199,19 @@
   height: 24px;
   line-height: 24px;
 }
+.semi-tagInput-wrapper-inputMirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+  white-space: pre;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: inherit;
+}
 .semi-tagInput-clearBtn {
   display: flex;
   justify-content: center;

package/lib/es/tagInput/tagInput.scss

@@ -137,6 +137,7 @@ $module: #{$prefix}-tagInput;
         padding-left: $spacing-extra-tight;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
+        position: relative;
 
         &-tag {
             margin-right: $spacing-extra-tight;
@@ -190,6 +191,8 @@ $module: #{$prefix}-tagInput;
         & &-input {
             flex-grow: 1;
             width: min-content;
+            min-width: 2px;
+            max-width: 100%;
             // min-width: 38px;
             border: none;
             outline: none;
@@ -240,6 +243,21 @@ $module: #{$prefix}-tagInput;
                 }
             }
         }
+
+        /* hidden mirror used to measure input text width */
+        &-inputMirror {
+            position: absolute;
+            top: 0;
+            left: 0;
+            visibility: hidden;
+            pointer-events: none;
+            height: 0;
+            overflow: hidden;
+            white-space: pre;
+            font-size: $font-size-regular;
+            font-weight: $font-weight-regular;
+            font-family: inherit;
+        }
     }
 
     &-clearBtn {

package/lib/es/timePicker/constants.d.ts

@@ -1,3 +1,4 @@
+export type PanelType = 'left' | 'right';
 declare const cssClasses: {
     PREFIX: string;
     RANGE_PICKER: string;

package/lib/es/timePicker/foundation.d.ts

@@ -1,3 +1,4 @@
+import type { PanelType } from './constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'leftTopOver' | 'rightTopOver';
 export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -16,11 +17,16 @@ declare class TimePickerFoundation<P = Record<string, any>, S = Record<string, a
     constructor(adapter: TimePickerAdapter<P, S>);
     init(): void;
     getPosition(): Position;
+    getDisabledTimeFns(panelType: PanelType, dates: Date[]): {
+        disabledHours: any;
+        disabledMinutes: any;
+        disabledSeconds: any;
+    };
     isDisabledHMS({ hours, minutes, seconds }: {
         hours: number;
         minutes: number;
         seconds: number;
-    }): boolean;
+    }, panelType?: PanelType, dates?: Date[]): boolean;
     isValidTimeZone(timeZone: string | number): boolean;
     getDefaultFormatIfNeed(): string;
     /**

package/lib/es/timePicker/foundation.js

@@ -26,17 +26,44 @@ class TimePickerFoundation extends BaseFoundation {
     const rtlDirection = direction === 'rtl' ? 'bottomRight' : '';
     return position || rtlDirection || strings.DEFAULT_POSITION[type];
   }
+  getDisabledTimeFns(panelType, dates) {
+    const {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds,
+      disabledTime
+    } = this.getProps();
+    // disabledTime is range-only: only invoke it when the picker is
+    // actually a range picker. In single mode panelType has no meaning, so
+    // we fall back to the top-level disabledHours / disabledMinutes /
+    // disabledSeconds without invoking disabledTime.
+    if (typeof disabledTime === 'function' && this._adapter.isRangePicker()) {
+      const disabledObj = disabledTime(dates, panelType) || {};
+      return {
+        disabledHours: disabledObj.disabledHours || disabledHours,
+        disabledMinutes: disabledObj.disabledMinutes || disabledMinutes,
+        disabledSeconds: disabledObj.disabledSeconds || disabledSeconds
+      };
+    }
+    return {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds
+    };
+  }
   isDisabledHMS(_ref) {
     let {
       hours,
       minutes,
       seconds
     } = _ref;
+    let panelType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left';
+    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     const {
       disabledHours,
       disabledMinutes,
       disabledSeconds
-    } = this.getProps();
+    } = this.getDisabledTimeFns(panelType, dates);
     const hDis = !isNullOrUndefined(hours) && hourIsDisabled(disabledHours, hours);
     const mDis = !isNullOrUndefined(hours) && !isNullOrUndefined(minutes) && minuteIsDisabled(disabledMinutes, hours, minutes);
     const sDis = !isNullOrUndefined(hours) && !isNullOrUndefined(minutes) && !isNullOrUndefined(seconds) && secondIsDisabled(disabledSeconds, hours, minutes, seconds);
@@ -158,11 +185,23 @@ class TimePickerFoundation extends BaseFoundation {
       if (this.isValidTimeZone(timeZone)) {
         dates = dates.map(date => utcToZonedTime(this.isValidTimeZone(__prevTimeZone) ? zonedTimeToUtc(date, __prevTimeZone) : date, timeZone));
       }
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     const inputValue = this.formatValue(dates);
     this.setState({
@@ -258,11 +297,23 @@ class TimePickerFoundation extends BaseFoundation {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let invalid = dates.some(d => isNaN(Number(d)));
     if (!invalid) {
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     return invalid;
   }

package/navigation/navigation.scss

@@ -569,6 +569,7 @@ $module: #{$prefix}-navigation;
             & > .#{$prefix}-button {
                 padding-left: $spacing-navigation_footer_collapse_btn_inner-paddingX;
                 padding-right: $spacing-navigation_footer_collapse_btn_inner-paddingX;
+                color: $color-navigation_footer_icon-default;
             }
         }
 

package/navigation/variables.scss

@@ -65,7 +65,7 @@ $spacing-navigation_sub_item_left_toggle_marginRight:$spacing-tight; // 顶部
 $color-navigation-bg-default: var(--semi-color-nav-bg); // 导航栏背景色
 $color-navigation_border-default: var(--semi-color-border); // 导航栏分割线色
 $color-navigation_header-text-default: var(--semi-color-text-0); // 导航栏 header 文字颜色
-$color-navigation_footer_icon-default: var(--semi-color-text-2); // 导航栏 footer 图标颜色
+$color-navigation_footer_icon-default: var(--semi-color-text-1); // 导航栏 footer 图标颜色
 $color-navigation_itemL1-bg-default: transparent; // 导航栏一级菜单项背景色
 $color-navigation_itemL1-text-default: var(--semi-color-text-0); // 导航栏一级菜单项文字颜色
 $color-navigation_itemL1_icon-default: var(--semi-color-text-2); // 导航栏一级菜单项图标颜色

package/overflowList/foundation.ts

@@ -28,22 +28,66 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
 
     getOverflowItem(): Array<Array<Record<string, any>>> {
         const { items } = this.getProps();
-        const { visibleState, overflow } = this.getStates();
+        const { visibleState, overflow, scrollOverflow } = this.getStates();
         if (!this.isScrollMode()) {
             return overflow;
         }
 
+        // Scroll mode relies on IntersectionObserver to compute visibility.
+        // During recalculation (e.g. items changed, or before observer fires),
+        // keep last computed overflow to avoid UI flicker (tabs arrows/menu state).
+        if (!visibleState || visibleState.size === 0) {
+            if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+                return scrollOverflow;
+            }
+            return [[], []];
+        }
 
         const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
 
+        // If no item is visible (e.g. initial layout not ready or list out of viewport),
+        // treat it as "unknown" and keep last computed overflow to avoid wrong enabling.
+        if (visibleStart < 0 || visibleEnd < 0) {
+            if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+                return scrollOverflow;
+            }
+            return [[], []];
+        }
+
         const overflowList = [];
         overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
         overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
         return overflowList;
     }
 
+    private _syncScrollOverflowCache(nextVisibleState: Map<string, boolean>): void {
+        if (!this.isScrollMode()) {
+            return;
+        }
+        const { items } = this.getProps();
+        const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(nextVisibleState.get(key)));
+        const visibleStart = visibleStateArr.indexOf(true);
+        const visibleEnd = visibleStateArr.lastIndexOf(true);
+
+        // No visible items means the result is not reliable; keep cache and stay "calculating"
+        if (visibleStart < 0 || visibleEnd < 0) {
+            this._adapter.updateStates({
+                isScrollOverflowCalculating: true,
+            });
+            return;
+        }
+
+        const overflowList: Array<Array<Record<string, any>>> = [];
+        overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
+        overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+        this._adapter.updateStates({
+            scrollOverflow: overflowList,
+            isScrollOverflowCalculating: false,
+        });
+    }
+
     handleIntersect(entries: Array<IntersectionObserverEntry>): void {
         const visibleState = copy(this.getState('visibleState'));
 
@@ -73,6 +117,8 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         }
         this.previousY = currentY;
         this._adapter.updateVisibleState(visibleState);
+        // Keep scroll overflow cache in sync for stable UI
+        this._syncScrollOverflowCache(visibleState);
         this._adapter.notifyIntersect(res);
     }
 
@@ -126,4 +172,4 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
 
 }
 
-export default OverflowListFoundation;
+export default OverflowListFoundation;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.96.0",
+    "version": "2.97.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14210,8 +14210,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.96.0",
-        "@douyinfe/semi-json-viewer-core": "2.96.0",
+        "@douyinfe/semi-animation": "2.97.0",
+        "@douyinfe/semi-json-viewer-core": "2.97.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14232,7 +14232,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "25977da675cef6d8dd70e92531b2441030991952",
+    "gitHead": "fefc4b3e8ea823bc99f68bfee02f3f8cc314726c",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -85,15 +85,39 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
     }
 
-    focus(optionsForOpen?: BasicOptionProps[]) {
+    focus(optionsForOpen?: BasicOptionProps[], openDropdown?: boolean) {
         const isFilterable = this._isFilterable();
         const isMultiple = this._isMultiple();
         const { isOpen } = this.getStates();
+        const { searchPosition } = this.getProps();
+        // Default to true if not specified (backward compatibility)
+        const shouldOpenDropdown = openDropdown !== false;
 
         this._adapter.updateFocusState(true);
         this._adapter.setIsFocusInContainer(false);
 
         if (isFilterable) {
+            /**
+             * When openDropdown is false, we only want to "refocus" the Select
+             * without changing dropdown visibility.
+             *
+             * NOTE: For searchPosition='dropdown', the search input is rendered in dropdown,
+             * so we should NOT toggle trigger input(showInput) here, otherwise it may affect
+             * tabIndex / focusability unexpectedly.
+             */
+            if (!shouldOpenDropdown) {
+                if (searchPosition === strings.SEARCH_POSITION_TRIGGER) {
+                    if (isMultiple) {
+                        this.focusInput();
+                    } else {
+                        this.toggle2SearchInput(true);
+                    }
+                } else {
+                    this._focusTrigger();
+                }
+                return;
+            }
+
             if (isMultiple) {
                 // when filter and multiple, focus input and open dropdown
                 this.focusInput();
@@ -1077,7 +1101,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             this.clearInput(e);
         }
         // after click showClear button, the select need to be focused
-        this.focus();
+        // but don't open dropdown to avoid focus state confusion
+        this.focus(undefined, false);
         this.clearSelected();
         // prevent this click open dropdown
         e.stopPropagation();

package/switch/switch.scss

@@ -43,6 +43,7 @@ $module: #{$prefix}-switch;
 
         .#{$module}-knob {
             transform: translateX($spacing-switch_checked-translateX);
+            background-color: $color-switch_knob-bg-checked;
         }
 
         &:active {

package/switch/variables.scss

@@ -30,7 +30,8 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 关闭态
+$color-switch_knob-bg-checked: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 开启态
 $color-switch_knob-border-default: var(--semi-color-border); // 开关滑块描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关文案颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关文案颜色