fix(components): [TreeSelect] checking node reset checked cache node (element-plus#12367)

* fix(components): [TreeSelect] checking node reset checked cache node

* refactor: remove unused variables and duplicate `onCheck` event

Author: yujinpan

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

@@ -576,4 +576,71 @@ describe('TreeSelect.vue', () => {
     await nextTick()
     expect(onCheckChange).toHaveBeenLastCalledWith(1)
   })
+
+  test('checking node will not reset checked cache node', async () => {
+    const modelValue = ref<number[]>([2])
+    const cacheData = reactive([{ value: 2, label: '2-label' }])
+    let id = 1
+    const { tree } = createComponent({
+      props: {
+        modelValue,
+        multiple: true,
+        showCheckbox: true,
+        checkStrictly: true,
+        lazy: true,
+        load: (node: object, resolve: (p: any) => any[]) => {
+          resolve([{ value: id, label: `${id}-label`, isLeaf: false }])
+          id++
+        },
+        cacheData,
+      },
+    })
+
+    await nextTick()
+
+    const node1 = tree.find('.el-tree-node__content')
+    const node1Checkbox = node1.find('.el-checkbox__original')
+
+    expect(node1.text()).toBe('1-label')
+    await node1Checkbox.trigger('click')
+
+    expect(modelValue.value).toEqual([1, 2])
+  })
+
+  test('cached checked node can be canceled', async () => {
+    const modelValue = ref<number[]>([2])
+    const cacheData = reactive([{ value: 2, label: '2-label' }])
+    let id = 1
+    const { tree } = createComponent({
+      props: {
+        modelValue,
+        multiple: true,
+        showCheckbox: true,
+        checkStrictly: true,
+        lazy: true,
+        load: (node: object, resolve: (p: any) => any[]) => {
+          resolve([{ value: id, label: `${id}-label`, isLeaf: false }])
+          id++
+        },
+        cacheData,
+      },
+    })
+
+    await nextTick()
+
+    const node1 = tree.find('.el-tree-node__content')
+    await node1.trigger('click')
+    await nextTick()
+
+    const node2 = tree.findAll('.el-tree-node__content')[1]
+    expect(node2.text()).toBe('2-label')
+
+    const node2Checkbox = node2.find('.el-checkbox')
+    expect(node2Checkbox.element.classList.contains('is-checked')).toBe(true)
+
+    await node2Checkbox.trigger('click')
+    expect(node2Checkbox.element.classList.contains('is-checked')).toBe(false)
+
+    expect(modelValue.value).toEqual([])
+  })
 })

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

@@ -112,6 +112,13 @@ export const useTree = (
     return options
   })
 
+  const cacheOptionsMap = computed(() => {
+    return cacheOptions.value.reduce(
+      (prev, next) => ({ ...prev, [next.value]: next }),
+      {}
+    )
+  })
+
   return {
     ...pick(toRefs(props), Object.keys(ElTree.props)),
     ...attrs,
@@ -171,13 +178,26 @@ export const useTree = (
     },
     onCheck: (data, params) => {
       const dataValue = getNodeValByProp('value', data)
+
+      // fix: checkedKeys has not cached keys
+      const uncachedCheckedKeys = params.checkedKeys
+      const cachedKeys = props.multiple
+        ? toValidArray(props.modelValue).filter(
+            (item) =>
+              item in cacheOptionsMap.value &&
+              !tree.value.getNode(item) &&
+              !uncachedCheckedKeys.includes(item)
+          )
+        : []
+      const checkedKeys = uncachedCheckedKeys.concat(cachedKeys)
+
       if (props.checkStrictly) {
         emit(
           UPDATE_MODEL_EVENT,
           // Checking for changes may come from `check-on-node-click`
           props.multiple
-            ? params.checkedKeys
-            : params.checkedKeys.includes(dataValue)
+            ? checkedKeys
+            : checkedKeys.includes(dataValue)
             ? dataValue
             : undefined
         )