@danielgindi/selectbox 1.0.64 → 1.0.67

package/lib/SelectBox.js

@@ -2511,15 +2511,18 @@ class SelectBox {
 
     /**
      * @param {DropList.ItemBase} item
+     * @returns {boolean} true if rendered, false if not
      * @private
      */
     _addMultiItemElement(item) {
         const p = this._p;
         const itemEl = this._renderMultiItem(item);
-        if (!itemEl) return;
+        if (!itemEl) return false;
 
         before(p.inputWrapper, itemEl);
         p.multiItemEls.push(itemEl);
+
+        return true;
     }
 
     /** @private */
@@ -2541,10 +2544,13 @@ class SelectBox {
 
     /** @private */
     _syncClearButton() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         // Set clear button
-        if (p.selectedItems.length > 0 && p.clearable && p.showSelection) {
+        if (p.selectedItems.length > 0 &&
+            p.selectedItems.some(x => x[multiItemLabelProp] !== false) &&
+            p.clearable && p.showSelection) {
             if (!p.clearButtonWrapper) {
                 p.clearButtonWrapper = createElement(
                     p.multi ? 'li' : 'span',
@@ -2574,7 +2580,8 @@ class SelectBox {
 
     /** @private */
     _syncPlaceholder() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         let placeholder = '';
 
@@ -2584,7 +2591,9 @@ class SelectBox {
             } else {
                 placeholder = defaultMultiPlaceholderFormatter(p.selectedItems, p.labelProp);
             }
-        } else if (p.selectedItems.length === 0 || !p.showSelection) {
+        } else if (p.selectedItems.length === 0 ||
+            !p.showSelection ||
+            p.selectedItems.every(x => x[multiItemLabelProp] === false)) {
             placeholder = p.placeholder == null ? '' : (p.placeholder + '');
         }
 
@@ -2613,13 +2622,16 @@ class SelectBox {
      * @returns {SelectBox}
      */
     _syncFull(fullItemsRender) {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         this._renderBase();
         this._syncClearButton();
         this._syncPlaceholder();
 
-        fullItemsRender = p.multi && p.showSelection && (fullItemsRender || p.selectedItems.length !== p.multiItemEls.length);
+        fullItemsRender = p.multi &&
+            p.showSelection &&
+            (fullItemsRender || p.selectedItems.filter(x => x[multiItemLabelProp] !== false).length !== p.multiItemEls.length);
 
         if (fullItemsRender || !p.showSelection || !p.multi) {
             // Remove all item elements
@@ -2672,8 +2684,9 @@ class SelectBox {
                         break;
                     }
 
-                    actualItemCount++;
-                    this._addMultiItemElement(items[i]);
+                    if (this._addMultiItemElement(items[i])) {
+                        actualItemCount++;
+                    }
                 }
 
                 if (addRestItem) {
@@ -3202,6 +3215,11 @@ class SelectBox {
             stickyGroup = groups[0].filter(x => stickyValues.has(x[valueProp]));
             if (stickyGroup.length > 0) {
                 groups[0] = groups[0].filter(x => !stickyValues.has(x[valueProp]));
+
+                if (groups[0].length === 0)
+                    groups.shift();
+            } else {
+                stickyGroup = null;
             }
         }
 
@@ -3226,7 +3244,7 @@ class SelectBox {
             });
         }
 
-        if (stickyGroup && stickyGroup.length > 0) {
+        if (stickyGroup) {
             groups.unshift(stickyGroup);
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.64",
+  "version": "1.0.67",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/vue/SelectBox.vue

@@ -213,6 +213,10 @@
                 type: Boolean,
                 default: false,
             },
+            treatGroupSelectionAsItems: {
+                type: Boolean,
+                default: false,
+            },
             autoCheckGroupChildren: {
                 type: Boolean,
                 default: true,
@@ -589,6 +593,11 @@
                 if (this._box)
                     this._box.setIsLoadingMode(!!this.isLoadingMode);
             },
+
+            treatGroupSelectionAsItems() {
+                if (this._box)
+                    this._box.setTreatGroupSelectionAsItems(!!this.treatGroupSelectionAsItems);
+            },
         },
 
         mounted() {
@@ -706,6 +715,7 @@
                     on: this._handleBoxEvents.bind(this),
                     additionalClasses: this.additionalClassesList,
                     isLoadingMode: this.isLoadingMode,
+                    treatGroupSelectionAsItems: this.treatGroupSelectionAsItems,
                 });
 
                 box.setValue(this.value === null ? undefined : this.value);