fix(Select): pick correct option by keyboard enter (#3707)

Tencent · Dec 7, 2023 · df5fc7c · df5fc7c
1 parent ed01999
commit df5fc7c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 20 deletions.
diff --git a/src/select/_example/remote-search.vue b/src/select/_example/remote-search.vue
@@ -4,10 +4,10 @@
       v-model="value"
       filterable
       placeholder="请选择"
-      :on-search="remoteMethod"
       :loading="loading"
       :options="options"
       style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
+      @search="remoteMethod"
     />
     <t-select
       v-model="value2"
@@ -44,16 +44,16 @@ const remoteMethod = (search) => {
       loading.value = false;
       options.value = [
         {
-          value: `${search}_test1`,
-          label: `${search}_test1`,
+          value: `腾讯_test1`,
+          label: `腾讯_test1`,
         },
         {
-          value: `${search}_test2`,
-          label: `${search}_test2`,
+          value: `腾讯_test2`,
+          label: `腾讯_test2`,
         },
         {
-          value: `${search}_test3`,
-          label: `${search}_test3`,
+          value: `腾讯_test3`,
+          label: `腾讯_test3`,
         },
       ];
     }, 500);

diff --git a/src/select/hooks/useKeyboardControl.ts b/src/select/hooks/useKeyboardControl.ts
@@ -38,9 +38,9 @@ export default function useKeyboardControl({
   max,
 }: useKeyboardControlType) {
   const hoverIndex = ref(-1);
+  const filteredOptions = ref([]); // 处理普通场景选项过滤键盘选中的问题
   const virtualFilteredOptions = ref([]); // 处理虚拟滚动下选项过滤通过键盘选择的问题
   const classPrefix = usePrefixClass();
-
   const handleKeyDown = (e: KeyboardEvent) => {
     const optionsListLength = displayOptions.value.length;
     let newIndex = hoverIndex.value;
@@ -61,6 +61,7 @@ export default function useKeyboardControl({
         break;
       case 'ArrowDown':
         e.preventDefault();
+
         if (hoverIndex.value === -1 || hoverIndex.value >= optionsListLength - 1) {
           newIndex = 0;
         } else {
@@ -73,27 +74,30 @@ export default function useKeyboardControl({
         break;
       case 'Enter':
         if (hoverIndex.value === -1) break;
+
+        let finalOptions =
+          selectPanelRef.value.isVirtual && isFilterable.value && virtualFilteredOptions.value.length
+            ? virtualFilteredOptions.value
+            : filteredOptions.value;
+
+        if (!finalOptions.length) finalOptions = optionsList.value;
         if (!innerPopupVisible.value) {
           setInnerPopupVisible(true, { e });
           break;
         }
-        const filteredOptions =
-          selectPanelRef.value.isVirtual && isFilterable.value && virtualFilteredOptions.value.length
-            ? virtualFilteredOptions.value
-            : optionsList.value;
 
         if (!multiple) {
-          const selectedOptions = getSelectedOptions(filteredOptions[hoverIndex.value].value);
-          setInnerValue(filteredOptions[hoverIndex.value].value, {
+          const selectedOptions = getSelectedOptions(finalOptions[hoverIndex.value].value);
+          setInnerValue(finalOptions[hoverIndex.value].value, {
             option: selectedOptions?.[0],
-            selectedOptions: getSelectedOptions(filteredOptions[hoverIndex.value].value),
+            selectedOptions: getSelectedOptions(finalOptions[hoverIndex.value].value),
             trigger: 'check',
             e,
           });
           setInnerPopupVisible(false, { e });
         } else {
           if (hoverIndex.value === -1) return;
-          const optionValue = filteredOptions[hoverIndex.value]?.value;
+          const optionValue = finalOptions[hoverIndex.value]?.value;
 
           if (!optionValue) return;
           const newValue = getNewMultipleValue(innerValue.value, optionValue);
@@ -119,6 +123,7 @@ export default function useKeyboardControl({
       // 展开重新恢复初始值
       hoverIndex.value = -1;
       virtualFilteredOptions.value = [];
+      filteredOptions.value = [];
     }
   });
 
@@ -140,5 +145,6 @@ export default function useKeyboardControl({
     hoverIndex,
     handleKeyDown,
     virtualFilteredOptions,
+    filteredOptions,
   };
 }
diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts
@@ -106,6 +106,8 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<KeysType>, inpu
   });
 
   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) => {

diff --git a/src/select/select-panel.tsx b/src/select/select-panel.tsx
@@ -106,8 +106,9 @@ export default defineComponent({
 
     expose({
       innerRef,
-      visibleData,
+      visibleData, // 虚拟滚动的展示数据
       isVirtual,
+      displayOptions, // 非虚拟滚动的展示数据
     });
 
     const renderPanel = (options: SelectOption[], extraStyle?: Styles) => (
@@ -119,7 +120,6 @@ export default defineComponent({
         ]}
         style={extraStyle}
       >
-        {}
         {/* create option */}
         {showCreateOption.value && renderCreateOption()}
         {/* loading状态 */}

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -184,7 +184,7 @@ export default defineComponent({
       });
     };
 
-    const { hoverIndex, virtualFilteredOptions, handleKeyDown } = useKeyboardControl({
+    const { hoverIndex, virtualFilteredOptions, handleKeyDown, filteredOptions } = useKeyboardControl({
       displayOptions,
       optionsList,
       innerPopupVisible,
@@ -261,9 +261,9 @@ export default defineComponent({
       }
       setInputValue(value);
       handleSearch(`${value}`, { e: context.e as KeyboardEvent });
-
       nextTick(() => {
         virtualFilteredOptions.value = selectPanelRef.value?.visibleData;
+        filteredOptions.value = selectPanelRef.value?.displayOptions;
       });
     };