fix(Select): fix checkall behavior when using filter props (Tencent#5104)

* fix(Select): fix checkall behavior when using filter props

* chore: optimize

* chore: update snapshot

* chore: optimize

Author: uyarn

packages/components/select/_example/multiple.vue

@@ -6,6 +6,7 @@
       :options="options1"
       placeholder="请选择云解决方案"
       multiple
+      filterable
       @focus="onFocus"
       @blur="onBlur"
     />

packages/components/select/hooks/useSelectOptions.ts

@@ -104,18 +104,20 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
     return res;
   });
 
+  const filterMethods = (option: SelectOption) => {
+    if (!props.filterable) return true;
+    if (isFunction(props.filter)) {
+      return props.filter(`${inputValue.value}`, option);
+    }
+    return option.label?.toLowerCase?.().indexOf(`${inputValue.value}`.toLowerCase()) > -1;
+  };
+
   const displayOptions = computed(() => {
     if (props.onSearch && props.filterable) return options.value; // 远程搜索时，不执行内部的过滤，不干预用户的自行处理，如输入首字母搜索中文的场景等
 
     if (!inputValue.value || !(props.filterable || isFunction(props.filter))) return options.value;
 
-    const filterMethods = (option: SelectOption) => {
-      if (isFunction(props.filter)) {
-        return props.filter(`${inputValue.value}`, option);
-      }
-
-      return option.label?.toLowerCase?.().indexOf(`${inputValue.value}`.toLowerCase()) > -1;
-    };
+    let checkAllOption: SelectOption;
 
     let res: SelectOption[] = [];
 
@@ -126,6 +128,9 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
           children: (option as SelectOptionGroup).children.filter(filterMethods),
         });
       }
+
+      if ((option as TdOptionProps)?.checkAll === true) checkAllOption = option;
+
       if (filterMethods(option)) {
         res.push(option);
       }
@@ -140,7 +145,7 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
       res = exactMatch.concat(fuzzyMatch);
     }
 
-    return res;
+    return res.length && checkAllOption ? [checkAllOption, ...res] : res;
   });
 
   return {
@@ -149,5 +154,6 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
     optionsList,
     optionsCache,
     displayOptions,
+    filterMethods,
   };
 };

packages/components/select/select.tsx

@@ -59,7 +59,11 @@ export default defineComponent({
       value: props.keys?.value || 'value',
       disabled: props.keys?.disabled || 'disabled',
     }));
-    const { optionsMap, optionsList, optionsCache, displayOptions } = useSelectOptions(props, keys, innerInputValue);
+    const { optionsMap, optionsList, optionsCache, displayOptions, filterMethods } = useSelectOptions(
+      props,
+      keys,
+      innerInputValue,
+    );
 
     // 内部数据,格式化过的
     const innerValue = computed(() => {
@@ -194,12 +198,17 @@ export default defineComponent({
 
     /**
      * 可选选项的列表
-     * 排除已禁用和全选的选项
+     * 排除已禁用和全选的选项，考虑过滤情况
      */
     const optionalList = computed(() =>
       optionsList.value.filter((item) => {
-        // @ts-ignore types only declare checkAll not declare check-all
-        return !item.disabled && !item['check-all'] && !item.checkAll;
+        return (
+          !item.disabled &&
+          // @ts-ignore types only declare checkAll not declare check-all
+          !item['check-all'] &&
+          !item.checkAll &&
+          filterMethods(item)
+        );
       }),
     );
 
@@ -232,14 +241,20 @@ export default defineComponent({
      * 根据 checked 的值计算最终选中的值：
      *    - 如果 checked 为 true，则选中所有非 disabled 选项，并保留已选中的 disabled 选项。
      *    - 如果 checked 为 false，则只保留已选中的 disabled 选项。
+     *    - 过滤条件下，如果 checked 为 true，则选中所有非 disabled 选项，并保留已选中的选项。
+     *    - 过滤条件下，如果 checked 为 false，则只保留已选中的 disabled 选项。
      */
     const onCheckAllChange = (checked: boolean) => {
       if (!props.multiple) return;
+      // disabled状态的选项，不参与全选的计算，始终保留
       const lockedValues = innerValue.value.filter((value: string | number | boolean) => {
         return optionsList.value.find((item) => item.value === value && item.disabled);
       });
+
       const activeValues = optionalList.value.map((option) => option.value);
-      const values = checked ? [...new Set([...activeValues, ...lockedValues])] : [...lockedValues];
+      const values = checked
+        ? [...new Set([...(orgValue.value as Array<SelectValue>), ...activeValues, ...lockedValues])]
+        : [...lockedValues];
       setInnerValue(values, { selectedOptions: getSelectedOptions(values), trigger: checked ? 'check' : 'clear' });
     };
 

packages/tdesign-vue-next/test/unit/snap/__snapshots__/csr.test.js.snap

@@ -111362,7 +111362,7 @@ exports[`csr snapshot test > csr test ./packages/components/select/_example/mult
           class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon"
         >
           <div
-            class="t-input t-is-readonly t-input--prefix t-input--suffix"
+            class="t-input t-input--prefix t-input--suffix"
           >
             <!---->
             <div
@@ -111416,12 +111416,11 @@ exports[`csr snapshot test > csr test ./packages/components/select/_example/mult
 
             </div>
             <input
-              class="t-input__inner t-input--soft-hidden"
+              class="t-input__inner"
               placeholder=""
-              readonly=""
               spellcheck="false"
               type="text"
-              unselectable="on"
+              unselectable="off"
             />
             <span
               class="t-input__input-pre"