+[LabelOnlySelectSelf]

docs/components/LabelOnlySelectSelf.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <treeselect
+      :multiple="true"
+      :flat="true"
+      :labelOnlySelectSelf="true"
+      :autoSelectDescendants="true"
+      :autoDeselectDescendants="true"
+      :options="options"
+      :alwaysOpen="true"
+      placeholder="Select your favourite(s)..."
+      v-model="value"
+      />
+    <treeselect-value :value="value" />
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      value: [],
+      options: [ {
+        id: 'fruits',
+        label: 'Fruits',
+        isExpanded: true,
+        children: [ {
+          id: 'apple',
+          label: 'Apple 🍎',
+          isNew: true,
+        }, {
+          id: 'grapes',
+          label: 'Grapes 🍇',
+        }, {
+          id: 'pear',
+          label: 'Pear 🍐',
+        }, {
+          id: 'strawberry',
+          label: 'Strawberry 🍓',
+        }, {
+          id: 'watermelon',
+          label: 'Watermelon 🍉',
+        } ],
+      }, {
+        id: 'vegetables',
+        label: 'Vegetables',
+        children: [ {
+          id: 'corn',
+          label: 'Corn 🌽',
+        }, {
+          id: 'carrot',
+          label: 'Carrot 🥕',
+        }, {
+          id: 'eggplant',
+          label: 'Eggplant 🍆',
+        }, {
+          id: 'tomato',
+          label: 'Tomato 🍅',
+        } ],
+      } ],
+    }),
+  }
+</script>

docs/partials/guides.pug

@@ -74,6 +74,11 @@
       - `"INDEX"` - Index of option: AAA 🡒 BB 🡒 C
   +demo('FlatModeAndSortValues')
 
++subsection('Label Only Select Self')
+  :markdown-it
+    For some cases, you will need to keep the choice of (related/unrelated) when click on node.
+  +demo('LabelOnlySelectSelf')
+
 +subsection('Prevent Value Combining')
   :markdown-it
     For non-flat & multi-select mode, if a branch node and its all descendants are checked, vue-treeselect will combine them into a single item in the value array, as demonstrated in the following example. By using `valueConsistsOf` prop you can change that behavior. This prop has four options:

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@riophae/vue-treeselect",
-  "version": "0.4.0",
+  "name": "@hanye9895/vue-treeselect",
+  "version": "0.5.4",
   "description": "A multi-select component with nested options support for Vue.js",
   "author": "Riophae Lee <riophaelee@gmail.com>",
   "license": "MIT",

src/components/Option.vue

@@ -111,7 +111,7 @@
 
       renderLabelContainer(children) {
         return (
-          <div class="vue-treeselect__label-container" onMousedown={this.handleMouseDownOnLabelContainer}>
+          <div class="vue-treeselect__label-container">
             {children}
           </div>
         )
@@ -124,7 +124,7 @@
         if (instance.disableBranchNodes && node.isBranch) return null
 
         return (
-          <div class="vue-treeselect__checkbox-container">
+          <div class="vue-treeselect__checkbox-container" onMousedown={this.handleMouseDownOnCheckboxContainer}>
             {children}
           </div>
         )
@@ -182,7 +182,7 @@
         })
 
         return (
-          <label class={labelClassName}>
+          <label class={labelClassName} onMousedown={this.handleMouseDownOnLabelContainer}>
             {node.label}
             {shouldShowCount && (
               <span class={countClassName}>({count})</span>
@@ -258,10 +258,21 @@
         if (node.isBranch && instance.disableBranchNodes) {
           instance.toggleExpanded(node)
         } else {
+          // fromLabel
           instance.select(node)
         }
       }),
 
+      handleMouseDownOnCheckboxContainer: onLeftClick(function handleMouseDownOnCheckboxContainer() {
+        const { instance, node } = this
+
+        if (node.isBranch && instance.disableBranchNodes) {
+          instance.toggleExpanded(node)
+        } else {
+          instance.select(node, true)
+        }
+      }),
+
       handleMouseDownOnRetry: onLeftClick(function handleMouseDownOnRetry() {
         const { instance, node } = this
 

src/mixins/treeselectMixin.js

@@ -393,6 +393,14 @@ export default {
       default: false,
     },
 
+    /**
+     * Set `true` to allow only select self when click on label.
+     */
+    labelOnlySelectSelf: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * Generates a hidden <input /> tag with this field name for html forms.
      */
@@ -1563,7 +1571,7 @@ export default {
             })
             this.$set(normalized, 'isExpanded', typeof isDefaultExpanded === 'boolean'
               ? isDefaultExpanded
-              : level < this.defaultExpandLevel)
+              : (level < this.defaultExpandLevel || node.isExpanded))
             this.$set(normalized, 'hasMatchedDescendants', false)
             this.$set(normalized, 'hasDisabledDescendants', false)
             this.$set(normalized, 'isExpandedOnSearch', false)
@@ -1749,7 +1757,7 @@ export default {
       )
     },
 
-    select(node) {
+    select(node, fromLabel) {
       if (this.disabled || node.isDisabled) {
         return
       }
@@ -1763,9 +1771,9 @@ export default {
         : !this.isSelected(node)
 
       if (nextState) {
-        this._selectNode(node)
+        this._selectNode(node, fromLabel && this.labelOnlySelectSelf)
       } else {
-        this._deselectNode(node)
+        this._deselectNode(node, fromLabel && this.labelOnlySelectSelf)
       }
 
       this.buildForestState()
@@ -1805,14 +1813,16 @@ export default {
     },
 
     // This is meant to be called only by `select()`.
-    _selectNode(node) {
+    _selectNode(node, onlySelf) {
       if (this.single || this.disableBranchNodes) {
         return this.addValue(node)
       }
 
       if (this.flat) {
         this.addValue(node)
 
+        if (onlySelf) return
+
         if (this.autoSelectAncestors) {
           node.ancestors.forEach(ancestor => {
             if (!this.isSelected(ancestor) && !ancestor.isDisabled) this.addValue(ancestor)
@@ -1853,14 +1863,16 @@ export default {
     },
 
     // This is meant to be called only by `select()`.
-    _deselectNode(node) {
+    _deselectNode(node, onlySelf) {
       if (this.disableBranchNodes) {
         return this.removeValue(node)
       }
 
       if (this.flat) {
         this.removeValue(node)
 
+        if (onlySelf) return
+
         if (this.autoDeselectAncestors) {
           node.ancestors.forEach(ancestor => {
             if (this.isSelected(ancestor) && !ancestor.isDisabled) this.removeValue(ancestor)