fix(tree): check-on-click prop sometimes doesn't work

CHANGELOG.en-US.md

@@ -19,6 +19,7 @@
 - Fix `n-avatar` shows placeholder after load fails, closes [#3315](https://github.com/TuSimple/naive-ui/issues/3315).
 - Fix `n-input-number` register `mouseup` event multiple times when hold on button.
 - Fix all components' exported props type's prop is `readonly`.
+- Fix `n-tree`'s `check-on-click` prop sometimes doesn't work.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -19,6 +19,7 @@
 - 修复 `n-avatar` 加载失败时依然显示 placeholder，关闭 [#3315](https://github.com/TuSimple/naive-ui/issues/3315)
 - 修复 `n-input-number` 按住按钮时重复注册 `mouseup` 事件
 - 修复所有组件导出的 props 类型属性都是 `readonly` 的
+- 修复 `n-tree` 的 `check-on-click` 属性有时不生效
 
 ### Feats
 

src/transfer/demos/enUS/render-source-list.demo.vue

@@ -64,8 +64,12 @@ export default defineComponent({
       pattern
     }) {
       return h(NTree, {
+        style: 'margin: 0 4px;',
         keyField: 'value',
         checkable: true,
+        selectable: false,
+        blockLine: true,
+        checkOnClick: true,
         data: treeData,
         pattern,
         checkedKeys: valueRef.value,

src/transfer/demos/zhCN/render-source-list.demo.vue

@@ -64,8 +64,12 @@ export default defineComponent({
       pattern
     }) {
       return h(NTree, {
+        style: 'margin: 0 4px;',
         keyField: 'value',
         checkable: true,
+        selectable: false,
+        blockLine: true,
+        checkOnClick: true,
         data: treeData,
         pattern,
         checkedKeys: valueRef.value,

src/transfer/index.ts

@@ -4,5 +4,5 @@ export type {
   Option as TransferOption,
   TransferRenderSourceLabel,
   TransferRenderTargetLabel,
-  RenderSourceListType as TransferRenderSourceList
+  TransferRenderSourceList
 } from './src/interface'

src/transfer/src/Transfer.tsx

@@ -29,7 +29,7 @@ import {
   OnUpdateValue,
   transferInjectionKey,
   TransferRenderTargetLabel,
-  RenderSourceListType,
+  TransferRenderSourceList,
   TransferRenderSourceLabel
 } from './interface'
 import style from './styles/index.cssr'
@@ -67,7 +67,7 @@ export const transferProps = {
   size: String as PropType<'small' | 'medium' | 'large'>,
   renderSourceLabel: Function as PropType<TransferRenderSourceLabel>,
   renderTargetLabel: Function as PropType<TransferRenderTargetLabel>,
-  renderSourceList: Function as PropType<RenderSourceListType>,
+  renderSourceList: Function as PropType<TransferRenderSourceList>,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>

src/transfer/src/interface.ts

@@ -25,7 +25,7 @@ export interface RenderListProps {
   pattern: string
 }
 
-export type RenderSourceListType = (props: RenderListProps) => VNodeChild
+export type TransferRenderSourceList = (props: RenderListProps) => VNodeChild
 
 export interface TransferInjection {
   targetValueSetRef: Ref<Set<OptionValue>>

src/tree/src/TreeNode.tsx

@@ -125,7 +125,8 @@ const TreeNode = defineComponent({
     function _handleClick (e: MouseEvent): void {
       const { value: expandOnClick } = NTree.expandOnClickRef
       const { value: selectable } = selectableRef
-      if (!selectable && !expandOnClick) return
+      const { value: mergedCheckOnClick } = mergedCheckOnClickRef
+      if (!selectable && !expandOnClick && !mergedCheckOnClick) return
       if (happensIn(e, 'checkbox') || happensIn(e, 'switcher')) return
       const { tmNode } = props
       if (selectable) {
@@ -134,7 +135,7 @@ const TreeNode = defineComponent({
       if (expandOnClick && !tmNode.isLeaf) {
         handleSwitcherClick()
       }
-      if (mergedCheckOnClickRef.value) {
+      if (mergedCheckOnClick) {
         handleCheck(!checkedRef.value)
       }
     }
@@ -247,6 +248,7 @@ const TreeNode = defineComponent({
       ),
       disabled: disabledRef,
       checkable: checkableRef,
+      mergedCheckOnClick: mergedCheckOnClickRef,
       checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
       selectable: selectableRef,
       expandOnClick: NTree.expandOnClickRef,
@@ -332,7 +334,8 @@ const TreeNode = defineComponent({
               [`${clsPrefix}-tree-node--pending`]: pending,
               [`${clsPrefix}-tree-node--disabled`]: disabled,
               [`${clsPrefix}-tree-node--selectable`]: selectable,
-              [`${clsPrefix}-tree-node--clickable`]: selectable || expandOnClick
+              [`${clsPrefix}-tree-node--clickable`]:
+                selectable || expandOnClick || this.mergedCheckOnClick
             },
             nodeProps?.class
           ]}