@danielgindi/selectbox 2.0.9 → 2.0.11

package/lib/DropList.js

@@ -1169,7 +1169,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;
                         }
 
@@ -1180,7 +1183,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,
@@ -1734,11 +1737,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);

package/lib/SelectBox.js

@@ -111,6 +111,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]
@@ -138,6 +139,7 @@ const defaultOptions = {
     multiPlaceholderFormatter: null,
     searchable: true,
     noResultsText: 'No matching results',
+    autoSelectTextOnCheck: true,
     filterThrottleWindow: 300,
     filterOnEmptyTerm: false,
     labelProp: 'label',
@@ -232,6 +234,7 @@ class SelectBox {
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
             noResultsText: o.noResultsText,
+            autoSelectTextOnCheck: o.autoSelectTextOnCheck,
 
             labelProp: o.labelProp,
             valueProp: o.valueProp,
@@ -1006,6 +1009,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}
@@ -1856,6 +1875,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;
 
@@ -1936,6 +1960,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');
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "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",
@@ -30,29 +30,29 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/runtime": "^7.26.9",
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.20.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/runtime": "^7.28.4",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.38.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "core-js": "^3.40.0",
-    "eslint": "^9.20.1",
+    "core-js": "^3.46.0",
+    "eslint": "^9.38.0",
     "eslint-formatter-codeframe": "^7.32.1",
     "eslint-plugin-vue": "^9.32.0",
-    "fs-extra": "^11.3.0",
-    "globals": "^15.15.0",
+    "fs-extra": "^11.3.2",
+    "globals": "^16.4.0",
     "husky": "^9.1.7",
     "pinst": "^3.0.0",
-    "rollup": "^4.34.8",
-    "sass": "^1.85.0"
+    "rollup": "^4.52.5",
+    "sass": "^1.93.2"
   },
   "dependencies": {
     "@danielgindi/dom-utils": "^1.0.11",
-    "@danielgindi/virtual-list-helper": "^1.0.13",
+    "@danielgindi/virtual-list-helper": "^1.0.15",
     "fast-deep-equal": "^3.1.3",
     "keycode-js": "^3.1.0",
     "mitt": "^3.0.1"

package/vue/DropList.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-show="false" />
+    <span v-show="false" />
 </template>
 
 <script>