fix(QTree): correctly handle node clickability for node > selectable: false (but expandable) #8327

Author: rstoenescu

ui/src/components/tree/QTree.js

@@ -542,34 +542,34 @@ export default createComponent({
 
           m.lazy === 'loading'
             ? h(QSpinner, {
-                class: 'q-tree__spinner',
-                color: computedControlColor.value
-              })
+              class: 'q-tree__spinner',
+              color: computedControlColor.value
+            })
             : (
                 isParent === true
                   ? h(QIcon, {
-                      class: 'q-tree__arrow'
+                    class: 'q-tree__arrow'
                     + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
-                      name: computedIcon.value,
-                      onClick (e) { onExpandClick(node, m, e) }
-                    })
+                    name: computedIcon.value,
+                    onClick (e) { onExpandClick(node, m, e) }
+                  })
                   : null
               ),
 
           m.hasTicking === true && m.noTick !== true
             ? h(QCheckbox, {
-                class: 'q-tree__tickbox',
-                modelValue: m.indeterminate === true ? null : m.ticked,
-                color: computedControlColor.value,
-                dark: isDark.value,
-                dense: true,
-                keepColor: true,
-                disable: m.tickable !== true,
-                onKeydown: stopAndPrevent,
-                'onUpdate:modelValue': v => {
-                  onTickedClick(m, v)
-                }
-              })
+              class: 'q-tree__tickbox',
+              modelValue: m.indeterminate === true ? null : m.ticked,
+              color: computedControlColor.value,
+              dark: isDark.value,
+              dense: true,
+              keepColor: true,
+              disable: m.tickable !== true,
+              onKeydown: stopAndPrevent,
+              'onUpdate:modelValue': v => {
+                onTickedClick(m, v)
+              }
+            })
             : null,
 
           h('div', {
@@ -587,22 +587,22 @@ export default createComponent({
 
         isParent === true
           ? h(QSlideTransition, {
-              duration: props.duration,
-              onShow,
-              onHide
-            }, () => withDirectives(
+            duration: props.duration,
+            onShow,
+            onHide
+          }, () => withDirectives(
+            h('div', {
+              class: 'q-tree__node-collapsible' + textColorClass.value,
+              key: `${ key }__q`
+            }, [
+              body,
               h('div', {
-                class: 'q-tree__node-collapsible' + textColorClass.value,
-                key: `${ key }__q`
-              }, [
-                body,
-                h('div', {
-                  class: 'q-tree__children'
+                class: 'q-tree__children'
                   + (m.disabled === true ? ' q-tree__node--disabled' : '')
-                }, children)
-              ]),
-              [ [ vShow, m.expanded ] ]
-            ))
+              }, children)
+            ]),
+            [ [ vShow, m.expanded ] ]
+          ))
           : body
       ])
     }
@@ -615,14 +615,12 @@ export default createComponent({
     function onClick (node, meta, e, keyboard) {
       keyboard !== true && blur(meta.key)
 
-      if (hasSelection.value) {
-        if (meta.selectable) {
-          if (props.noSelectionUnset === false) {
-            emit('update:selected', meta.key !== props.selected ? meta.key : null)
-          }
-          else if (meta.key !== props.selected) {
-            emit('update:selected', meta.key || null)
-          }
+      if (hasSelection.value && meta.selectable) {
+        if (props.noSelectionUnset === false) {
+          emit('update:selected', meta.key !== props.selected ? meta.key : null)
+        }
+        else if (meta.key !== props.selected) {
+          emit('update:selected', meta.key || null)
         }
       }
       else {