fix: Fixed the problem of searching for English commas in Cascader will hitting all data (#2030)

* fix: fix multi-selected, showClear Cascader, after clicking the clear button, option panel still in search status
* fix: Fixed the problem of searching for English commas in Cascader and hitting all data

packages/semi-foundation/cascader/foundation.ts

@@ -1,7 +1,6 @@
 import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes, isFunction, isObject } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
-    filter,
     findAncestorKeys,
     calcCheckedKeysForUnchecked,
     calcCheckedKeysForChecked,
@@ -11,6 +10,7 @@ import {
 } from '../tree/treeUtil';
 import { Motion } from '../utils/type';
 import {
+    filter,
     convertDataToEntities,
     normalizedArr,
     isValid,
@@ -911,8 +911,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                     if (_notExist) {
                         return false;
                     }
-                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
-                    return filter(sugInput, data, filterTreeNode, false, filteredPath);
+                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
+                    return filter(sugInput, data, filterTreeNode, filteredPath);
                 })
                 .filter(
                     item => (filterTreeNode && !filterLeafOnly) ||
@@ -935,6 +935,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const isControlled = this._isControlledComponent();
         const newState: Partial<BasicCascaderInnerData> = {};
         if (multiple) {
+            newState.isSearching = false;
             this._adapter.updateInputValue('');
             this._adapter.notifyOnSearch('');
             newState.checkedKeys = new Set([]);

packages/semi-foundation/cascader/util.ts

@@ -21,6 +21,36 @@ export function normalizedArr(val: any) {
     }
 }
 
+/**
+ * @returns whether option includes sugInput.
+ * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
+ */
+export function filter(sugInput: string, option: any, filterTreeNode: any, filteredPath?: string[]) {
+    if (!filterTreeNode) {
+        return true;
+    }
+    let filterFn = filterTreeNode;
+    let target: string;
+    if (typeof filterTreeNode === 'boolean') {
+        filterFn = (targetVal: string, val: string) => {
+            const input = targetVal.toLowerCase();
+            return val
+                .toLowerCase()
+                .includes(input);
+        };
+        // 当 filterTreeNode 是 bool 类型时，由 Cascader 内部判断是否符合筛选条件，使用 join('') 修复搜索英文逗号导致所有数据被匹配问题
+        // When the type of of filterTreeNode is bool, Cascader internally determines whether it meets the filtering conditions.
+        // Use join('') to fix the problem that searching for English commas causes all data to be matched.
+        target = filteredPath.join('');
+    } else {
+        // 当 filterTreeNode 为函数类型时，由用户判断是否符合筛选条件，使用 join(), 和原来保持一致
+        // When the type of of filterTreeNode is function, the user determines whether it meets the filtering conditions, 
+        // uses join() to be consistent with the previous version.
+        target = filteredPath.join();
+    }
+    return filterFn(sugInput, target, option);
+}
+
 /**
  * Traverse all the data by `treeData`.
  */

packages/semi-foundation/tree/treeUtil.ts

@@ -422,14 +422,13 @@ export function calcMotionKeys(oldKeySet: Set<string>, newKeySet: Set<string>, k
 /**
  * @returns whether option includes sugInput.
  * When filterTreeNode is a function,returns the result of filterTreeNode which called with (sugInput, target, option).
- * The filteredPath parameter will only be passed in when the Cascader calls the filter function
  */
-export function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any, filteredPath?: string) {
+export function filter(sugInput: string, option: any, filterTreeNode: any, filterProps: any) {
     if (!filterTreeNode) {
         return true;
     }
     let filterFn = filterTreeNode;
-    let target = filteredPath ?? option;
+    let target = option;
     if (typeof filterTreeNode === 'boolean') {
         filterFn = (targetVal: string, val: any) => {
             const input = targetVal.toLowerCase();

packages/semi-ui/cascader/index.tsx

@@ -890,10 +890,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
 
     showClearBtn = () => {
         const { showClear, disabled, multiple } = this.props;
-        const { selectedKeys, isOpen, isHovering, checkedKeys } = this.state;
+        const { selectedKeys, isOpen, isHovering, checkedKeys, inputValue } = this.state;
         const hasValue = selectedKeys.size;
         const multipleWithHaveValue = multiple && checkedKeys.size;
-        return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
+        return showClear && (inputValue || hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
     };
 
     renderClearBtn = () => {