fix: tree-select not disable parent cannot checked, close vueComponent#5316

Author: tangjinzhou

components/vc-tree-select/OptionList.tsx

@@ -151,13 +151,16 @@ export default defineComponent({
 
           // >>> Select item
           case KeyCode.ENTER: {
-            const { selectable, value } = activeEntity.value?.node || {};
-            if (activeEntity.value && selectable !== false) {
-              onInternalSelect(null, {
-                node: { key: activeKey.value },
-                selected: !legacyContext.checkedKeys.includes(value),
-              });
+            if (activeEntity.value) {
+              const { selectable, value } = activeEntity.value.node || {};
+              if (selectable !== false) {
+                onInternalSelect(null, {
+                  node: { key: activeKey.value },
+                  selected: !legacyContext.checkedKeys.includes(value),
+                });
+              }
             }
+
             break;
           }
 
@@ -233,6 +236,7 @@ export default defineComponent({
             showLine={treeLine}
             loadData={searchValue ? null : (loadData as any)}
             motion={treeMotion}
+            activeKey={activeKey.value}
             // We handle keys by out instead tree self
             checkable={checkable}
             checkStrictly

components/vc-tree-select/TreeSelect.tsx

@@ -387,7 +387,15 @@ export default defineComponent({
       const values = displayKeys.map(
         key => keyEntities.value[key]?.node?.[mergedFieldNames.value.value] ?? key,
       );
-      const rawDisplayValues = convert2LabelValues(values);
+      // Back fill with origin label
+      const labeledValues = values.map(val => {
+        const targetItem = rawLabeledValues.value.find(item => item.value === val);
+        return {
+          value: val,
+          label: targetItem?.label,
+        };
+      });
+      const rawDisplayValues = convert2LabelValues(labeledValues);
 
       const firstVal = rawDisplayValues[0];
 
@@ -728,6 +736,7 @@ export default defineComponent({
           emptyOptions={!mergedTreeData.value.length}
           onDropdownVisibleChange={onInternalDropdownVisibleChange}
           tagRender={props.tagRender || slots.tagRender}
+          dropdownMatchSelectWidth={props.dropdownMatchSelectWidth ?? true}
         />
       );
     };

components/vc-tree-select/index.tsx

@@ -1,4 +1,4 @@
-// base rc-tree-select@5.0.0-alpha.4
+// base rc-tree-select@5.1.4
 import type { TreeSelectProps } from './TreeSelect';
 import TreeSelect, { treeSelectProps } from './TreeSelect';
 import TreeNode from './TreeNode';

components/vc-tree-select/utils/strategyUtil.ts

@@ -24,6 +24,7 @@ export function formatStrategyValues(
       if (
         entity &&
         entity.children &&
+        entity.children.some(({ node }) => valueSet.has(node[fieldNames.value])) &&
         entity.children.every(
           ({ node }) => isCheckDisabled(node) || valueSet.has(node[fieldNames.value]),
         )