fix(components): [tree-select] cache data update incorrect (element-plus#11225)

Author: yujinpan

packages/components/tree-select/__tests__/tree-select.test.tsx

@@ -16,8 +16,7 @@ const createComponent = ({
   props?: typeof TreeSelect['props']
 } = {}) => {
   const wrapperRef = ref<InstanceType<typeof TreeSelect>>()
-  const value = props.modelValue || ref('')
-  const data = ref([
+  const defaultData = ref([
     {
       value: 1,
       label: '一级 1',
@@ -36,24 +35,33 @@ const createComponent = ({
     },
   ])
 
-  const wrapper = mount({
-    render() {
-      return (
-        <TreeSelect
-          data={data.value}
-          renderAfterExpand={false}
-          {...props}
-          modelValue={value.value}
-          onUpdate:modelValue={(val: string) => (value.value = val)}
-          ref={(val: InstanceType<typeof TreeSelect>) =>
-            (wrapperRef.value = val)
-          }
-          v-slots={slots}
-        />
-      )
-    },
+  const bindProps = reactive({
+    modelValue: ref(''),
+    data: defaultData,
+    renderAfterExpand: false,
+    ...props,
   })
 
+  const wrapper = mount(
+    {
+      render() {
+        return (
+          <TreeSelect
+            {...bindProps}
+            onUpdate:modelValue={(val: string) => (bindProps.modelValue = val)}
+            ref={(val: InstanceType<typeof TreeSelect>) =>
+              (wrapperRef.value = val)
+            }
+            v-slots={slots}
+          />
+        )
+      },
+    },
+    {
+      attachTo: 'body',
+    }
+  )
+
   return {
     wrapper,
     getWrapperRef: () =>
@@ -485,4 +493,44 @@ describe('TreeSelect.vue', () => {
     await nextTick()
     expect(select.vm.selectedLabel).toBe('1-label')
   })
+
+  test('filter-method', async () => {
+    const modelValue = ref(1)
+    const data = ref([
+      { value: 1, label: '1' },
+      { value: 2, label: '2' },
+      { value: 3, label: '3' },
+    ])
+    const filterMethod = vi.fn((val: string) => {
+      data.value = [...data.value].filter((item) => item.label.includes(val))
+    })
+    const { select, tree } = createComponent({
+      props: {
+        modelValue,
+        data,
+        filterable: true,
+        filterMethod,
+        // trigger cache data
+        renderAfterExpand: true,
+      },
+    })
+
+    await nextTick()
+    expect(tree.vm.data.length).toBe(3)
+    expect(select.vm.selectedLabel).toBe('1')
+
+    const input = select.find('input')
+    input.element.focus()
+    await nextTick()
+    expect(select.vm.selectedLabel).toBe('')
+    expect(filterMethod).toHaveBeenLastCalledWith('')
+
+    select.vm.selectedLabel = '2'
+    select.vm.debouncedOnInputChange()
+    // await debounce
+    await new Promise((resolve) => setTimeout(resolve))
+    expect(select.vm.selectedLabel).toBe('2')
+    expect(filterMethod).toHaveBeenLastCalledWith('2')
+    expect(tree.text()).toBe('2')
+  })
 })

packages/components/tree-select/src/cache-options.ts

@@ -29,9 +29,18 @@ export default defineComponent({
             select.cachedOptions.set(item.value, item)
           }
         })
-        select.setSelected()
+
+        // fork from packages/select/src/useSelect.ts#330
+        const inputs = select.selectWrapper?.querySelectorAll('input') || []
+        if (
+          !Array.from(inputs).includes(
+            document.activeElement as HTMLInputElement
+          )
+        ) {
+          select.setSelected()
+        }
       },
-      { immediate: true, deep: true }
+      { flush: 'post', immediate: true }
     )
 
     return () => undefined