fix(components): [TreeSelect] incorrect props interaction and css paths (element-plus#7156)

* fix(components): [tree-select] `inheritAttrs` causes duplicate attributes

* fix(components): [TreeSelect] css path incorrect

* fix(components): [TreeSelect] `defaultExpandedKeys` contains `undefined`

* fix(components): [TreeSelect] only expand on click node when the `check-strictly` is false and auto expand selected parent node

* test(components): [TreeSelect] update render/filter/props unit test

Author: yujinpan

packages/components/tree-select/__tests__/tree-select.spec.ts

@@ -39,6 +39,7 @@ const createComponent = ({
           },
         ],
         'onUpdate:modelValue': (val: string) => (value.value = val),
+        renderAfterExpand: false,
         ...props,
       }
     },
@@ -205,15 +206,15 @@ describe('TreeSelect.vue', () => {
   })
 
   test('filter', async () => {
-    const { select, tree } = createComponent({
+    const { tree } = createComponent({
       props: {
         filterable: true,
       },
     })
 
-    select.vm.query = '一级 1'
+    tree.vm.filter('一级 1')
     await nextTick()
-    expect(tree.findAll('.el-tree-node').length).toBe(1)
+    expect(tree.findAll('.el-tree-node:not(.is-hidden)').length).toBe(1)
   })
 
   test('props', async () => {
@@ -240,7 +241,7 @@ describe('TreeSelect.vue', () => {
     })
 
     await nextTick()
-    expect(tree.find('.el-tree-node').text()).toBe('1')
+    expect(tree.find('.el-select-dropdown__item').text()).toBe('1')
     wrapper.vm.modelValue = '2'
     await nextTick()
     expect(select.vm.selectedLabel).toBe('2')

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

@@ -8,6 +8,8 @@ import { useTree } from './tree'
 
 export default defineComponent({
   name: 'ElTreeSelect',
+  // disable `ElSelect` inherit current attrs
+  inheritAttrs: false,
   props: {
     ...ElSelect.props,
     ...ElTree.props,

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

@@ -70,11 +70,25 @@ export const useTree = (
     ...pick(toRefs(props), Object.keys(ElTree.props)),
     ...attrs,
     nodeKey: key,
-    defaultExpandedKeys: computed(() =>
-      props.defaultExpandedKeys
-        ? props.defaultExpandedKeys.concat(props.modelValue)
-        : toValidArray(props.modelValue)
-    ),
+
+    // only expand on click node when the `check-strictly` is false
+    expandOnClickNode: computed(() => {
+      return !props.checkStrictly
+    }),
+
+    // auto expand selected parent node
+    defaultExpandedKeys: computed(() => {
+      const values = toValidArray(props.modelValue)
+      const parentKeys = tree.value
+        ? values
+            .map((item) => tree.value?.getNode(item)?.parent?.key)
+            .filter((item) => isValidValue(item))
+        : values
+      return props.defaultExpandedKeys
+        ? props.defaultExpandedKeys.concat(parentKeys)
+        : parentKeys
+    }),
+
     renderContent: (h, { node, data, store }) => {
       return h(
         TreeSelectOption,
@@ -131,6 +145,10 @@ export const useTree = (
   }
 }
 
+function isValidValue(val: any) {
+  return val || val === 0
+}
+
 function toValidArray(val: any) {
-  return Array.isArray(val) ? val : val || val === 0 ? [val] : []
+  return Array.isArray(val) ? val : isValidValue(val) ? [val] : []
 }