@danielgindi/selectbox 2.0.3 → 2.0.5

package/lib/DropList.js

@@ -652,7 +652,8 @@ class DropList {
         const p = this._p;
 
         if (this.hasFocusedItem() && p.multi) {
-            let item = p.items[p.focusItemIndex];
+            const items = p.filteredItems ?? p.items;
+            let item = items[p.focusItemIndex];
             if (item._nocheck || item._nointeraction) return this;
 
             item._checked = !item._checked;
@@ -720,7 +721,7 @@ class DropList {
         const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
 
         let isMulti = p.multi;
-        let items = p.items;
+        const items = p.items;
 
         if (atIndex == null || atIndex < 0 || atIndex >= p.items.length) {
             atIndex = -1;
@@ -1185,11 +1186,10 @@ class DropList {
             if (!Array.isArray(filteredItems)) {
                 if (term) {
                     const matcher = new RegExp(escapeRegex(term), 'i');
-                    const labelProp = p.labelProp;
 
                     filteredItems = p.items.filter(x => {
                         if (!filterGroups && x._group) return true;
-                        return matcher.test(x[labelProp]);
+                        return matcher.test(x.label);
                     });
                 } else {
                     filteredItems = null;
@@ -1230,7 +1230,7 @@ class DropList {
             p.filteredItems = null;
         }
 
-        this.needsRefilter = false;
+        p.needsRefilter = false;
 
         const items = p.filteredItems ?? p.items;
         p.hasNoResultsItem = items.length === 0 && !!p.noResultsText;
@@ -1251,11 +1251,17 @@ class DropList {
         return this;
     }
 
-    getFilteredItemCount() {
+    rushRefilter() {
         const p = this._p;
-
         if (p.needsRefilter)
             this._refilterItems();
+        return this;
+    }
+
+    getFilteredItemCount() {
+        const p = this._p;
+
+        this.rushRefilter();
 
         if (p.filteredItems)
             return p.filteredItems.length;
@@ -1457,6 +1463,8 @@ class DropList {
 
         // Calculate virtual viewport size
         if (p.virtualListHelper.isVirtual()) {
+            // Avoid extremely high size which will cause laying out the whole list
+            menuEl.style.height = Math.min(el.clientHeight, document.body.clientHeight) + 'px';
             p.virtualListHelper.render();
         }
 
@@ -1701,6 +1709,8 @@ class DropList {
     setCheckedValues(values) {
         const p = this._p;
 
+        this.rushRefilter();
+
         let groupIndexes = [];
 
         for (let i = 0, count = p.items.length; i < count; i++) {
@@ -1764,7 +1774,7 @@ class DropList {
 
         excludeGroups = excludeGroups && p.groupCount > 0;
 
-        let items = [];
+        const items = [];
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
@@ -1805,9 +1815,7 @@ class DropList {
             }
         });
 
-        if (p.needsRefilter) {
-            this._refilterItems();
-        }
+        this.rushRefilter();
 
         const el = p.el;
         el.style.position = 'absolute';
@@ -2015,6 +2023,8 @@ class DropList {
     setFocusedItemAtIndex(itemIndex) {
         const p = this._p;
 
+        this.rushRefilter();
+
         if (p.filteredItems) {
             const item = p.items[itemIndex];
             itemIndex = p.items.indexOf(item);
@@ -2212,6 +2222,8 @@ class DropList {
     setSingleSelectedItemAtIndex(itemIndex) {
         const p = this._p;
 
+        this.rushRefilter();
+
         let itemEl = null;
 
         if (itemIndex > -1 && !p.items[itemIndex]._nointeraction) {
@@ -2971,7 +2983,7 @@ class DropList {
             let affectedItems = 0;
 
             if (p.autoCheckGroupChildren) {
-                let items = p.filteredItems ?? p.items;
+                const items = p.filteredItems ?? p.items;
                 let groupIndex = items.indexOf(item);
 
                 for (let i = groupIndex + 1, len = items.length; i < len; i++) {
@@ -3014,7 +3026,7 @@ class DropList {
                 affectedItems: affectedItems,
             });
         } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
-            let items = p.filteredItems ?? p.items;
+            const items = p.filteredItems ?? p.items;
             let itemIndex = items.indexOf(item);
             let groupIndex = -1;
 
@@ -3040,7 +3052,7 @@ class DropList {
         if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
             return this;
 
-        let items = p.filteredItems ?? p.items;
+        const items = p.filteredItems ?? p.items;
         let groupItem = items[groupIndex];
 
         if (!groupItem || !groupItem._group) return this;
@@ -3166,7 +3178,7 @@ class DropList {
     _determineVirtualMode(targetItemCount) {
         const p = this._p;
 
-        let items = p.filteredItems ?? p.items;
+        const items = p.filteredItems ?? p.items;
         if (targetItemCount === undefined) {
             targetItemCount = items.length;
         }

package/lib/SelectBox.js

@@ -380,8 +380,7 @@ class SelectBox {
             p.resizeObserver.observe(p.el);
         }
 
-        if (o.filterFn)
-            this.setFilterFn(o.filterFn);
+        this.setFilterFn(o.filterFn);
 
         this.setItems(o.items);
         delete o.items; // we do not need this in memory anymore
@@ -1174,6 +1173,10 @@ class SelectBox {
         const p = this._p;
         if (p.filterFn === fn)
             return this;
+
+        // Do not keep this reference, as far as the user is concerned - he/she did not set a custom filter.
+        p.filterFn = fn;
+
         if (!fn) {
             // Add search by multi-item label
             fn = (items, term) => {
@@ -1187,7 +1190,6 @@ class SelectBox {
                 });
             };
         }
-        p.filterFn = fn;
         p.dropList?.setFilterFn(fn);
         return this;
     }
@@ -2306,6 +2308,7 @@ class SelectBox {
                     p.splitListCheckedGroups);
             }
             dropList.setItems(items);
+            dropList.invokeRefilter();
             p.itemsChanged = false;
             p.selectionChanged = true;
             p.resortBySelectionNeeded = false;

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "@danielgindi/selectbox",
-  "version": "2.0.3",
-  "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",
-  "broswer": "dist/lib.umd.min.js",
-  "author": {
-    "name": "Daniel Cohen Gindi",
-    "email": "danielgindi@gmail.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/danielgindi/selectbox.git"
-  },
-  "directories": {
-    "dist": "dist",
-    "lib": "lib"
-  },
-  "scripts": {
-    "build": "npm run lint && node ./scripts/build.js",
-    "lint": "eslint -f codeframe ./",
-    "lint-fix": "eslint -f codeframe --fix ./",
-    "prepublishOnly": "npm run build",
-    "prepare": "husky"
-  },
-  "bugs": {
-    "url": "https://github.com/danielgindi/selectbox/issues"
-  },
-  "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",
-    "@rollup/plugin-terser": "^0.4.4",
-    "core-js": "^3.40.0",
-    "eslint": "^9.20.1",
-    "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "fs-extra": "^11.3.0",
-    "globals": "^15.15.0",
-    "husky": "^9.1.7",
-    "pinst": "^3.0.0",
-    "rollup": "^4.34.8",
-    "sass": "^1.85.0"
-  },
-  "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.11",
-    "@danielgindi/virtual-list-helper": "^1.0.13",
-    "fast-deep-equal": "^3.1.3",
-    "keycode-js": "^3.1.0",
-    "mitt": "^3.0.1"
-  },
-  "peerDependencies": {
-    "vue": "^2.* || ^3.*"
-  }
-}
+{
+  "name": "@danielgindi/selectbox",
+  "version": "2.0.5",
+  "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",
+  "broswer": "dist/lib.umd.min.js",
+  "author": {
+    "name": "Daniel Cohen Gindi",
+    "email": "danielgindi@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/danielgindi/selectbox.git"
+  },
+  "directories": {
+    "dist": "dist",
+    "lib": "lib"
+  },
+  "scripts": {
+    "build": "npm run lint && node ./scripts/build.js",
+    "lint": "eslint -f codeframe ./",
+    "lint-fix": "eslint -f codeframe --fix ./",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky"
+  },
+  "bugs": {
+    "url": "https://github.com/danielgindi/selectbox/issues"
+  },
+  "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",
+    "@rollup/plugin-terser": "^0.4.4",
+    "core-js": "^3.40.0",
+    "eslint": "^9.20.1",
+    "eslint-formatter-codeframe": "^7.32.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "fs-extra": "^11.3.0",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
+    "pinst": "^3.0.0",
+    "rollup": "^4.34.8",
+    "sass": "^1.85.0"
+  },
+  "dependencies": {
+    "@danielgindi/dom-utils": "^1.0.11",
+    "@danielgindi/virtual-list-helper": "^1.0.13",
+    "fast-deep-equal": "^3.1.3",
+    "keycode-js": "^3.1.0",
+    "mitt": "^3.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^2.* || ^3.*"
+  }
+}