fix(comp:select): filter option exception (#751)

fix #750
IDuxFE · Feb 14, 2022 · 96ed380 · 96ed380
1 parent 54456c6
commit 96ed380
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
@@ -330,6 +330,35 @@ describe('Select', () => {
       expect(wrapper.findAllComponents(Option).length).toBe(0)
     })
 
+    test('searchFilter with labelKey work', async () => {
+      const wrapper = SelectMount({
+        props: {
+          open: true,
+          searchable: true,
+          options: [
+            { key: 1, name: 'Tom', id: 'tom' },
+            { key: 2, name: 'Jerry', id: 'jerry' },
+            { key: 3, name: 'Speike', id: 'speike' },
+          ],
+          labelKey: 'name',
+          valueKey: 'id',
+        },
+      })
+
+      expect(wrapper.find('.ix-select-searchable').exists()).toBe(true)
+
+      const input = wrapper.find('input')
+      await input.setValue('T')
+
+      expect(wrapper.findAllComponents(Option).length).toBe(1)
+
+      await input.setValue('e')
+      expect(wrapper.findAllComponents(Option).length).toBe(2)
+
+      await input.setValue('z')
+      expect(wrapper.findAllComponents(Option).length).toBe(0)
+    })
+
     test('size work', async () => {
       const wrapper = SelectMount({ props: { size: 'lg' } })
 

diff --git a/packages/components/select/src/composables/useOptions.ts b/packages/components/select/src/composables/useOptions.ts
@@ -150,8 +150,11 @@ function convertOptions(nodes: VNode[] | undefined, parentKey?: VKey, grouped?:
   return mergedOptions
 }
 
-const defaultFilter: SelectFilterFn = (searchValue: string, option: SelectData): boolean => {
-  return option.label?.toLowerCase().includes(searchValue.toLowerCase()) ?? false
+const getDefaultFilter = (props: SelectProps): SelectFilterFn => {
+  return (searchValue: string, option: SelectData) => {
+    const filterField = props.labelKey ?? 'label'
+    return option[filterField]?.toLowerCase().includes(searchValue.toLowerCase()) ?? false
+  }
 }
 
 function useSearchFilter(props: SelectProps) {
@@ -160,6 +163,8 @@ function useSearchFilter(props: SelectProps) {
     if (isFunction(searchFilter)) {
       return searchFilter
     }
-    return searchFilter ? defaultFilter : false
+
+    // #750 配置了labelKey后过滤筛选不生效
+    return searchFilter ? getDefaultFilter(props) : false
   })
 }