fix(tree-select): parent items in tree are selectable when `check-str…

…ategy="child"` and `:cascade="false"`, closes #2780
tusen-ai · Apr 17, 2022 · 5ecea9e · 5ecea9e
1 parent 4ac87da
commit 5ecea9e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 34 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -9,6 +9,7 @@
 - Fix `n-drawer` & `n-modal` may overflow screen on opening if `:autofocus="true"`.
 - Fix `n-tree-select`'s filter not working correctly when `children-field` is not set, closed [#2789](https://github.com/TuSimple/naive-ui/issues/2789).
 - Fix `n-tree-select`'s matched style is not cleared after filter value is cleared.
+- Fix `n-tree-select`'s parent items in tree are selectable when `check-strategy="child"` and `:cascade="false"`, closes [#2780](https://github.com/TuSimple/naive-ui/issues/2780).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -9,6 +9,7 @@
 - 修复 `n-drawer` 和 `n-modal` 在 `:autofocus="true"` 情况下打开时可能溢出屏幕
 - 修复 `n-tree-select` 在使用 `children-field` 时过滤器不生效，关闭 [#2789](https://github.com/TuSimple/naive-ui/issues/2789)
 - 修复 `n-tree-select` 清空搜索值时搜索命中样式未更新
+- 修复 `n-tree-select` 在 `check-strategy="child"` 和 `:cascade="false"` 时非叶节点依然可以被选择，关闭 [#2780](https://github.com/TuSimple/naive-ui/issues/2780)
 
 ### Feats
 

diff --git a/src/tree-select/src/TreeSelect.tsx b/src/tree-select/src/TreeSelect.tsx
@@ -49,6 +49,8 @@ import {
   call,
   ExtractPublicPropTypes,
   MaybeArray,
+  resolveSlot,
+  resolveWrappedSlot,
   useAdjustedTo,
   warnOnce
 } from '../../_utils'
@@ -863,28 +865,26 @@ export default defineComponent({
                                 <div
                                   class={`${mergedClsPrefix}-tree-select-menu__empty`}
                                 >
-                                  {$slots.empty ? (
-                                    $slots.empty()
-                                  ) : (
+                                  {resolveSlot($slots.empty, () => [
                                     <NEmpty
                                       theme={mergedTheme.peers.Empty}
                                       themeOverrides={
                                         mergedTheme.peerOverrides.Empty
                                       }
                                     />
-                                  )}
-                                </div>
-                              )}
-                              {$slots.action && (
-                                <div
-                                  class={`${mergedClsPrefix}-tree-select-menu__action`}
-                                  data-action
-                                >
-                                  {{
-                                    default: $slots.action
-                                  }}
+                                  ])}
                                 </div>
                               )}
+                              {resolveWrappedSlot($slots.action, (children) => {
+                                return children ? (
+                                  <div
+                                    class={`${mergedClsPrefix}-tree-select-menu__action`}
+                                    data-action
+                                  >
+                                    {children}
+                                  </div>
+                                ) : null
+                              })}
                               <NBaseFocusDetector onFocus={this.handleTabOut} />
                             </div>,
                             [

diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx
@@ -750,15 +750,7 @@ export default defineComponent({
       toggleExpand(node.key)
     }
     function handleSelect (node: TmNode): void {
-      if (
-        props.disabled ||
-        node.disabled ||
-        !props.selectable ||
-        (props.internalTreeSelect &&
-          !props.multiple &&
-          mergedCheckStrategyRef.value === 'child' &&
-          !node.isLeaf)
-      ) {
+      if (props.disabled || !props.selectable) {
         return
       }
       pendingNodeKeyRef.value = node.key

diff --git a/src/tree/src/TreeNode.tsx b/src/tree/src/TreeNode.tsx
@@ -86,7 +86,19 @@ const TreeNode = defineComponent({
       }
     }
 
+    const selectableRef = useMemo(
+      () =>
+        !props.tmNode.disabled &&
+        NTree.selectableRef.value &&
+        (NTree.internalTreeSelect
+          ? NTree.mergedCheckStrategyRef.value !== 'child' ||
+            (NTree.multipleRef.value && NTree.cascadeRef.value) ||
+            props.tmNode.isLeaf
+          : true)
+    )
+
     function _handleClick (e: MouseEvent): void {
+      if (!selectableRef.value) return
       if (happensIn(e, 'checkbox') || happensIn(e, 'switcher')) return
       NTree.handleSelect(props.tmNode)
     }
@@ -208,17 +220,7 @@ const TreeNode = defineComponent({
             props.tmNode.isLeaf)
       ),
       checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
-      selectable: computed(
-        () =>
-          NTree.selectableRef.value &&
-          (NTree.internalTreeSelect
-            ? NTree.multipleRef.value
-              ? true
-              : NTree.mergedCheckStrategyRef.value === 'child'
-                ? props.tmNode.isLeaf
-                : true
-            : true)
-      ),
+      selectable: selectableRef,
       internalScrollable: NTree.internalScrollableRef,
       draggable: NTree.draggableRef,
       blockLine: blockLineRef,