@douyinfe/semi-foundation 2.96.0 → 2.97.0

package/cascader/foundation.ts

@@ -170,6 +170,7 @@ export interface BasicCascaderProps {
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
     checkRelation?: string;
+    remote?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -423,6 +424,76 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         } else {
             this._adapter.updateStates({ keyEntities });
         }
+
+        // If options(treeData) updates during searching (e.g. remote search async update),
+        // we need to sync filteredKeys with the latest keyEntities; otherwise the UI may
+        // render empty list ("暂无数据") because filteredKeys are based on stale entities.
+        // NOTE: updateSelectedKey/updateStates are async in React, so we pass keyEntities
+        // explicitly to avoid reading stale state.
+        this.recalculateFilteredKeys(undefined, keyEntities);
+    }
+
+    /**
+     * Calculate filtered keys based on current props.
+     * - In remote mode: do not do local match, treat current treeData nodes as results
+     * - In local mode: perform matching by filterTreeNode
+     */
+    _calcFilteredKeys(sugInput: string, keyEntities?: BasicEntities): string[] {
+        if (!sugInput) {
+            return [];
+        }
+        const { treeNodeFilterProp, filterTreeNode, filterLeafOnly, remote } = this.getProps();
+        const entities = Object.values(keyEntities ?? this.getState('keyEntities')) as BasicEntity[];
+
+        if (remote) {
+            return entities
+                .filter(item => !item._notExist)
+                .filter(item => (filterTreeNode && !filterLeafOnly) || this._isLeaf(item.data))
+                .map(item => item.key);
+        }
+
+        return entities
+            .filter(item => {
+                const { key, _notExist, data } = item;
+                if (_notExist) {
+                    return false;
+                }
+                const filteredPath = this.getItemPropPath(key, treeNodeFilterProp, keyEntities);
+                return filter(sugInput, data, filterTreeNode, filteredPath);
+            })
+            .filter(item => (filterTreeNode && !filterLeafOnly) || this._isLeaf(item.data))
+            .map(item => item.key);
+    }
+
+    /**
+     * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+     * Used when treeData changes asynchronously in searching state.
+     */
+    recalculateFilteredKeys(input?: string, nextKeyEntities?: BasicEntities) {
+        const isFilterable = this._isFilterable();
+        if (!isFilterable) {
+            return;
+        }
+
+        // When input is not explicitly provided, only recalculate in searching state.
+        // Otherwise, treeData updates may incorrectly force component into searching mode
+        // because inputValue can be the selected label text in normal (non-searching) state.
+        const currentIsSearching = this.getState('isSearching');
+        if (isUndefined(input) && !currentIsSearching) {
+            return;
+        }
+
+        const sugInput = isUndefined(input) ? this.getState('inputValue') : input;
+        const filteredKeys = this._calcFilteredKeys(sugInput, nextKeyEntities);
+        const updateStates: Partial<BasicCascaderInnerData> = {
+            isSearching: Boolean(sugInput),
+            filteredKeys: new Set(filteredKeys),
+        };
+        if (nextKeyEntities) {
+            updateStates.keyEntities = nextKeyEntities;
+        }
+        this._adapter.updateStates(updateStates);
+        this._adapter.rePositionDropdown();
     }
 
     // call when props.value change
@@ -970,25 +1041,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     handleInputChange(sugInput: string) {
         this._adapter.updateInputValue(sugInput);
-        const { keyEntities } = this.getStates();
-        const { treeNodeFilterProp, filterTreeNode, filterLeafOnly } = this.getProps();
-        let filteredKeys: string[] = [];
-        if (sugInput) {
-            filteredKeys = (Object.values(keyEntities) as BasicEntity[])
-                .filter(item => {
-                    const { key, _notExist, data } = item;
-                    if (_notExist) {
-                        return false;
-                    }
-                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
-                    return filter(sugInput, data, filterTreeNode, filteredPath);
-                })
-                .filter(
-                    item => (filterTreeNode && !filterLeafOnly) ||
-                    this._isLeaf(item as unknown as BasicCascaderData)
-                )
-                .map(item => item.key);
-        }
+        const filteredKeys = this._calcFilteredKeys(sugInput);
 
         this._adapter.updateStates({
             isSearching: Boolean(sugInput),
@@ -1054,7 +1107,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData() {
         const { keyEntities, isSearching } = this.getStates();
         const isFilterable = this._isFilterable();
+
         if (isSearching && isFilterable) {
+            // Both local & remote search mode should render flattened search list
             return this.getFilteredData();
         }
         return (Object.values(keyEntities) as BasicEntity[])

package/datePicker/datePicker.scss

@@ -1129,7 +1129,44 @@ $module-list: #{$prefix}-scrolllist;
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
 
+    // Max width constraint for compact panels
+    $compact-max-width: calc(100vw - 32px);
+
+    // Make the compact panel shrink-to-fit its contents.
+    // This ensures the popover background/container expands together with
+    // long locale texts instead of letting inner buttons visually overflow.
+    display: inline-block;
+    max-width: $compact-max-width;
+
+    // Ensure the popover expands to fit this compact datepicker
+    &:not(&-insetInput) {
+        width: max-content;
+    }
+
+    .#{$module}-container {
+        // Keep flex layout but allow the container to size by content.
+        width: max-content;
+    }
+
     .#{$module}-month-grid {
+        // Let the month grid contribute its intrinsic width to the popover.
+        width: max-content;
+
+        .#{$module}-month-grid-left,
+        .#{$module}-month-grid-right {
+            min-width: $width-datepicker_month_compact;
+            // Keep the current compact width as the baseline,
+            // but allow the panel to grow to fit long locale texts.
+            // When reaching viewport limit, month title will ellipsis.
+            max-width: $compact-max-width;
+        }
+
+        // Keep calendar body centered when panel grows
+        // without breaking navigation layout in range mode.
+        .#{$module}-month {
+            margin-left: auto;
+            margin-right: auto;
+        }
 
         &[x-type="dateTime"],
         &[x-type="dateTimeRange"] {
@@ -1139,6 +1176,18 @@ $module-list: #{$prefix}-scrolllist;
             }
         }
 
+        // Allow yam (year-month scrolllist) panel to expand with content in compact mode
+        .#{$module}-yam {
+            // Use relative positioning so parent can expand to fit content width
+            // Height is constrained to prevent scrolllist from expanding too much
+            position: relative;
+            width: 100%;
+            max-width: 100%;
+            max-height: $height-datepicker_yam_panel_compact;
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1169,6 +1218,18 @@ $module-list: #{$prefix}-scrolllist;
             box-sizing: border-box;
             height: $height-datepicker_yam_panel_header_compact;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
+            width: 100%;
+            max-width: 100%;
+
+            // Constrain the back button to prevent overflow
+            button,
+            .#{$prefix}-button {
+                width: 100%;
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
 
         .#{$module}-yearmonth-body {
@@ -1265,9 +1326,14 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     .#{$module}-navigation {
+        box-sizing: border-box;
         height: $width-datepicker_nav_compact;
         padding: $spacing-datepicker_nav_compact-padding;
         padding-bottom: 0;
+        // In compact mode, keep navigation constrained within each panel
+        // (especially important for dateRange two-column layout).
+        width: 100%;
+        max-width: 100%;
 
         &-left,
         &-right {
@@ -1281,10 +1347,21 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
+            min-width: 0;
+            overflow: hidden;
+
             .#{$prefix}-button {
                 // 覆盖样式，否则会从button继承
                 @include font-size-small;
                 line-height: $lineHeight-datepicker_compact;
+                max-width: 100%;
+
+                > span {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
         }
     }
@@ -1498,7 +1575,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1514,7 +1594,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-date {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1530,7 +1613,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTime {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1546,7 +1632,12 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            // Keep the 2-panel baseline when possible, but cap it to the compact viewport limit.
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1562,7 +1653,11 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTimeRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,

package/form/foundation.ts

@@ -158,7 +158,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     validate(fieldPaths?: Array<string> | ValidateOptions): Promise<unknown> {
-        const { validateFields } = this.getProps();
+        const props = this.getProps();
+        // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+        const validateFields = props.validator || props.validateFields;
         
         // Parse options
         let fields: Array<string> | undefined;
@@ -184,7 +186,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     // form level validate
     _formValidate(silent: boolean = false): Promise<unknown> {
         const { values } = this.data;
-        const { validateFields } = this.getProps();
+        const props = this.getProps();
+        // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+        const validateFields = props.validator || props.validateFields;
 
         return new Promise((resolve, reject) => {
             let maybePromisedErrors;
@@ -245,7 +249,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // field level validate
-    _fieldsValidate(fieldPaths: Array<string>, silent: boolean = false): Promise<unknown> {
+    _fieldsValidate(fieldPaths?: Array<string>, silent: boolean = false): Promise<unknown> {
         const { values } = this.data;
         // When there is no custom validation function at Form level, perform validation of each Field
         return new Promise((resolve, reject) => {

package/form/utils.ts

@@ -131,6 +131,7 @@ export function mergeProps(props: any) {
         wrapperCol,
         initValue,
         validate,
+        validator,
         /**
          * error、warning、default、success
          */
@@ -179,6 +180,10 @@ export function mergeProps(props: any) {
     const required = isRequired(rules);
 
     emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
+
+    // `validator` is the recommended name; `validate` is kept as a deprecated alias.
+    const finalValidate = validator || validate;
+
     return {
         field,
         label,
@@ -191,7 +196,7 @@ export function mergeProps(props: any) {
         noErrorMessage,
         isInInputGroup,
         initValue,
-        validate,
+        validate: finalValidate,
         validateStatus,
         trigger,
         allowEmptyString,
@@ -218,4 +223,4 @@ export function mergeProps(props: any) {
 
 function bothEmptyArray(val: any, otherVal: any) {
     return Array.isArray(val) && Array.isArray(otherVal) && !val.length && !otherVal.length;
-}
+}

package/image/previewImageFoundation.ts

@@ -51,6 +51,28 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     containerWidth = 0; 
     containerHeight = 0;
 
+    // initialZoom should only be applied once per image src (first initialization)
+    private _initialZoomApplied = false;
+    private _initialZoomAppliedSrc: any = undefined;
+
+    private _syncInitialZoomFlagWithSrc = () => {
+        const src = this.getProp("src");
+        if (src !== this._initialZoomAppliedSrc) {
+            this._initialZoomAppliedSrc = src;
+            this._initialZoomApplied = false;
+        }
+    };
+
+    private _clampZoom = (zoom: number) => {
+        const { maxZoom, minZoom } = this.getProps() as any;
+        const max = typeof maxZoom === 'number' ? maxZoom : 5;
+        const min = typeof minZoom === 'number' ? minZoom : 0.1;
+        if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+            return min;
+        }
+        return Math.min(max, Math.max(min, zoom));
+    };
+
     init() {
         this._getContainerBoundingRectSize();
     }
@@ -84,14 +106,21 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     _getInitialZoom = () => {
-        const { ratio } = this.getProps();
+        const { ratio, initialZoom } = this.getProps() as any;
         let _zoom = 1;
 
+        // initialZoom is only used for the first initialization of each src
+        this._syncInitialZoomFlagWithSrc();
+        if (!this._initialZoomApplied && typeof initialZoom === 'number' && Number.isFinite(initialZoom) && initialZoom > 0) {
+            this._initialZoomApplied = true;
+            return this._clampZoom(initialZoom);
+        }
+
         if (ratio === 'adaptation') {
             _zoom = this._getAdaptationZoom();
         }
 
-        return _zoom;
+        return this._clampZoom(_zoom);
     }
 
     setLoading = (loading: boolean) => {
@@ -108,6 +137,8 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             const { naturalWidth: w, naturalHeight: h } = e.target as any;
             this.originImageHeight = h;
             this.originImageWidth = w;
+            // New image is loaded; allow initialZoom to be applied once for this src
+            this._syncInitialZoomFlagWithSrc();
             this.setState({
                 loading: false,
             } as any);
@@ -357,4 +388,4 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             y: boundOffsetY
         };
     }
-}
+}

package/image/previewInnerFoundation.ts

@@ -205,12 +205,13 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleZoomImage = (newZoom: number, notify: boolean = true, e?: WheelEvent) => {
         const { zoom } = this.getStates();
-        if (zoom !== newZoom) {
-            notify && this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        const nextZoom = this._clampZoom(newZoom);
+        if (zoom !== nextZoom) {
+            notify && this._adapter.notifyZoom(nextZoom, nextZoom > zoom);
             
-            this._adapter.changeImageZoom(newZoom, e);
+            this._adapter.changeImageZoom(nextZoom, e);
             this.setState({
-                zoom: newZoom,
+                zoom: nextZoom,
             } as any);
         }
     }
@@ -316,4 +317,14 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             this.preloadSingleImage();
         }
     }
+
+    private _clampZoom = (zoom: number) => {
+        const { maxZoom, minZoom } = this.getProps() as any;
+        const max = typeof maxZoom === 'number' ? maxZoom : 5;
+        const min = typeof minZoom === 'number' ? minZoom : 0.1;
+        if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+            return min;
+        }
+        return Math.min(max, Math.max(min, zoom));
+    };
 }

package/input/textarea.scss

@@ -16,6 +16,21 @@ $module: #{$prefix}-input;
     transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
+    // When native resize changes textarea width, wrapper (border/clear/counter) should follow.
+    // Default wrapper is `width: 100%`, so it won't grow with textarea. Enable shrink-to-fit.
+    &-resizeX {
+        // Keep original textarea wrapper formatting (stacking counter, etc.),
+        // only shrink-to-fit width so border follows horizontal resize.
+        // Using inline-flex here may change internal layout and cause clear/counter misalignment.
+        display: inline-block;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    &-resizeY {
+        // Keep default width behavior; vertical resize doesn't require wrapper width change.
+    }
+
     &:hover {
         background-color: $color-input_default-bg-hover;
     }
@@ -40,6 +55,10 @@ $module: #{$prefix}-input;
         color: $color-textarea-icon-default;
         right: $spacing-textarea-icon-right;
         height: $height-textarea-default;
+        // Center the icon within the clearbtn area
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         & > svg {
             pointer-events: none;
@@ -130,6 +149,7 @@ $module: #{$prefix}-input;
 
 .#{$module}-textarea {
     position: relative;
+    // resize is now controlled by resize prop, default to none for backward compatibility
     resize: none;
     // min-height: $height-input_default;
     padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
@@ -177,6 +197,8 @@ $module: #{$prefix}-input;
 
     &-autosize {
         overflow: hidden;
+        // When autosize is enabled, force resize to none to avoid conflicts
+        resize: none;
     }
 
     &-counter {
@@ -235,6 +257,19 @@ $module: #{$prefix}-input;
     padding: 0;
     align-items: flex-start;
 
+    &.#{$module}-textarea-wrapper-resizeX {
+        // Keep line number + textarea layout, but let width shrink-to-fit
+        display: inline-flex;
+        width: fit-content;
+        max-width: 100%;
+
+        .#{$module}-textarea-content {
+            flex: 0 0 auto;
+        }
+
+        // Do not force a minimum width here; allow the control to fit narrow containers.
+    }
+
     .#{$module}-textarea-lineNumber {
         flex-shrink: 0;
         padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;

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

@@ -114,6 +114,7 @@ export interface BasicCascaderProps {
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
     checkRelation?: string;
+    remote?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -204,6 +205,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getItemPropPath(selectedKey: string, prop: string | any[], keyEntities?: BasicEntities): any[];
     _getCacheValue(keyEntities: BasicEntities): any;
     collectOptions(init?: boolean): void;
+    /**
+     * Calculate filtered keys based on current props.
+     * - In remote mode: do not do local match, treat current treeData nodes as results
+     * - In local mode: perform matching by filterTreeNode
+     */
+    _calcFilteredKeys(sugInput: string, keyEntities?: BasicEntities): string[];
+    /**
+     * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+     * Used when treeData changes asynchronously in searching state.
+     */
+    recalculateFilteredKeys(input?: string, nextKeyEntities?: BasicEntities): void;
     handleValueChange(value: BasicValue): void;
     /**
      * When single selection, the clear objects of

package/lib/cjs/cascader/foundation.js

@@ -218,6 +218,72 @@ class CascaderFoundation extends _foundation.default {
         keyEntities
       });
     }
+    // If options(treeData) updates during searching (e.g. remote search async update),
+    // we need to sync filteredKeys with the latest keyEntities; otherwise the UI may
+    // render empty list ("暂无数据") because filteredKeys are based on stale entities.
+    // NOTE: updateSelectedKey/updateStates are async in React, so we pass keyEntities
+    // explicitly to avoid reading stale state.
+    this.recalculateFilteredKeys(undefined, keyEntities);
+  }
+  /**
+   * Calculate filtered keys based on current props.
+   * - In remote mode: do not do local match, treat current treeData nodes as results
+   * - In local mode: perform matching by filterTreeNode
+   */
+  _calcFilteredKeys(sugInput, keyEntities) {
+    if (!sugInput) {
+      return [];
+    }
+    const {
+      treeNodeFilterProp,
+      filterTreeNode,
+      filterLeafOnly,
+      remote
+    } = this.getProps();
+    const entities = Object.values(keyEntities !== null && keyEntities !== void 0 ? keyEntities : this.getState('keyEntities'));
+    if (remote) {
+      return entities.filter(item => !item._notExist).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+    }
+    return entities.filter(item => {
+      const {
+        key,
+        _notExist,
+        data
+      } = item;
+      if (_notExist) {
+        return false;
+      }
+      const filteredPath = this.getItemPropPath(key, treeNodeFilterProp, keyEntities);
+      return (0, _util.filter)(sugInput, data, filterTreeNode, filteredPath);
+    }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+  }
+  /**
+   * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+   * Used when treeData changes asynchronously in searching state.
+   */
+  recalculateFilteredKeys(input, nextKeyEntities) {
+    const isFilterable = this._isFilterable();
+    if (!isFilterable) {
+      return;
+    }
+    // When input is not explicitly provided, only recalculate in searching state.
+    // Otherwise, treeData updates may incorrectly force component into searching mode
+    // because inputValue can be the selected label text in normal (non-searching) state.
+    const currentIsSearching = this.getState('isSearching');
+    if ((0, _isUndefined2.default)(input) && !currentIsSearching) {
+      return;
+    }
+    const sugInput = (0, _isUndefined2.default)(input) ? this.getState('inputValue') : input;
+    const filteredKeys = this._calcFilteredKeys(sugInput, nextKeyEntities);
+    const updateStates = {
+      isSearching: Boolean(sugInput),
+      filteredKeys: new Set(filteredKeys)
+    };
+    if (nextKeyEntities) {
+      updateStates.keyEntities = nextKeyEntities;
+    }
+    this._adapter.updateStates(updateStates);
+    this._adapter.rePositionDropdown();
   }
   // call when props.value change
   handleValueChange(value) {
@@ -804,29 +870,7 @@ class CascaderFoundation extends _foundation.default {
   }
   handleInputChange(sugInput) {
     this._adapter.updateInputValue(sugInput);
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      treeNodeFilterProp,
-      filterTreeNode,
-      filterLeafOnly
-    } = this.getProps();
-    let filteredKeys = [];
-    if (sugInput) {
-      filteredKeys = Object.values(keyEntities).filter(item => {
-        const {
-          key,
-          _notExist,
-          data
-        } = item;
-        if (_notExist) {
-          return false;
-        }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
-        return (0, _util.filter)(sugInput, data, filterTreeNode, filteredPath);
-      }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
-    }
+    const filteredKeys = this._calcFilteredKeys(sugInput);
     this._adapter.updateStates({
       isSearching: Boolean(sugInput),
       filteredKeys: new Set(filteredKeys)
@@ -897,6 +941,7 @@ class CascaderFoundation extends _foundation.default {
     } = this.getStates();
     const isFilterable = this._isFilterable();
     if (isSearching && isFilterable) {
+      // Both local & remote search mode should render flattened search list
       return this.getFilteredData();
     }
     return Object.values(keyEntities).filter(item => item.parentKey === null && !item._notExist)