@danielgindi/selectbox 2.0.9 → 2.0.11

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.9
+ * @danielgindi/selectbox 2.0.11
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -1197,7 +1197,10 @@ class DropList {
                     p.items.map(x => {
                         const y = x[ItemSymbol];
                         if (y !== undefined) {
-                            y[ItemSymbol] = x;
+                            // Seal it to avoid object finding issues when wrapped in proxies by Vue or other libs
+                            y[ItemSymbol] = Object.seal({
+                                [ItemSymbol]: x,
+                            });
                             return y;
                         }
 
@@ -1208,7 +1211,7 @@ class DropList {
                 if (Array.isArray(filteredItems)) {
                     // And back
                     filteredItems = filteredItems.map(oitem => {
-                        let our = oitem[ItemSymbol];
+                        let our = oitem[ItemSymbol]?.[ItemSymbol]; // double-unwrap sealed->item
                         if (!our) {
                             our = {
                                 [ItemSymbol]: oitem,
@@ -1762,11 +1765,7 @@ class DropList {
             let item = p.items[i];
             let checked = !item._nocheck && values.indexOf(item.value) !== -1;
 
-            let itemIndex = i;
-            if (p.filteredItems) {
-                const item = p.items[itemIndex];
-                itemIndex = p.filteredItems.indexOf(item);
-            }
+            let itemIndex = p.filteredItems ? p.filteredItems.indexOf(item) : i;
 
             if (item._group && itemIndex !== -1) {
                 groupIndexes.push(itemIndex);
@@ -3415,6 +3414,7 @@ const inputBackbufferCssProps = [
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
  * @property {boolean} [searchable=false] is it searchable?
  * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
+ * @property {boolean} [autoSelectTextOnCheck=true] automatically select text in input when an item is checked (multi mode). Used to allow the user to quickly type multiple items.
  * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
  * @property {boolean} [filterOnEmptyTerm=false] call the filter function on empty search term too
  * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
@@ -3442,6 +3442,7 @@ const defaultOptions = {
     multiPlaceholderFormatter: null,
     searchable: true,
     noResultsText: 'No matching results',
+    autoSelectTextOnCheck: true,
     filterThrottleWindow: 300,
     filterOnEmptyTerm: false,
     labelProp: 'label',
@@ -3536,6 +3537,7 @@ class SelectBox {
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
             noResultsText: o.noResultsText,
+            autoSelectTextOnCheck: o.autoSelectTextOnCheck,
 
             labelProp: o.labelProp,
             valueProp: o.valueProp,
@@ -4310,6 +4312,22 @@ class SelectBox {
         return this._p.noResultsText;
     }
 
+    /**
+     * @param {boolean} autoSelectTextOnCheck
+     * @returns {SelectBox}
+     */
+    setAutoSelectTextOnCheck(autoSelectTextOnCheck) {
+        this._p.autoSelectTextOnCheck = autoSelectTextOnCheck;
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    getAutoSelectTextOnCheck() {
+        return this._p.autoSelectTextOnCheck;
+    }
+
     /**
      * @param {number} window
      * @returns {SelectBox}
@@ -5160,6 +5178,11 @@ class SelectBox {
                     case 'check': {
                         if (!p.multi) return;
 
+                        if (p.autoSelectTextOnCheck && p.input && document.activeElement === p.input) {
+                            // Select the text in the input, without causing any focus changes
+                            p.input.setSelectionRange(0, p.input.value.length);
+                        }
+
                         const item = /**@type DropList.Item*/event.item;
                         const value = event.value;
 
@@ -5240,6 +5263,11 @@ class SelectBox {
                     case 'groupcheck': {
                         if (!p.multi) return;
 
+                        if (p.autoSelectTextOnCheck && p.input && document.activeElement === p.input) {
+                            // Select the text in the input, without causing any focus changes
+                            p.input.setSelectionRange(0, p.input.value.length);
+                        }
+
                         if (event.affectedCount) {
                             this._scheduleSync(p.sortSelectedItems ? 'full' : 'render_base');
                         }