@danielgindi/selectbox 2.0.37 → 2.0.39

package/lib/DropList.js

@@ -2709,14 +2709,14 @@ class DropList {
 
                 // Inline search box not available, then support typing to focus by first letters
                 if (!p.searchable)
-                    this._keydownFreeType(event);
+                    this._keydownFreeType(event, !this.isVisible());
 
                 preventDefault = false;
             }
         }
     }
 
-    _keydownFreeType(evt) {
+    _keydownFreeType(evt, autoSelect) {
         const p = this._p;
 
         // noinspection JSDeprecatedSymbols
@@ -2775,6 +2775,10 @@ class DropList {
             let next = p.virtualListHelper.getItemElementAt(matchIndex);
             this._focus(evt, next || null, matchIndex, true);
 
+            if (autoSelect) {
+                this.triggerItemSelection(next ? null : items[matchIndex], evt);
+            }
+
             // Record the last filter used
             p.previousFilter = keyword;
 

package/lib/SelectBox.js

@@ -110,6 +110,7 @@ const inputBackbufferCssProps = [
  * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderRestMultiItem]
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderRestMultiItem]
  * @property {boolean} [searchable=false] is it searchable?
+ * @property {boolean} [allowTypeToSelect=true] default behavior of type to select (focus first item starting with the search term) when searchable is true
  * @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
@@ -240,6 +241,7 @@ class SelectBox {
             showPlaceholderInTooltip: o.showPlaceholderInTooltip,
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
+            allowTypeToSelect: o.allowTypeToSelect,
             noResultsText: o.noResultsText,
             autoSelectTextOnCheck: o.autoSelectTextOnCheck,
 
@@ -1022,6 +1024,20 @@ class SelectBox {
         return this;
     }
 
+    /**
+     * @param {boolean} allowTypeToSelect
+     * @returns {SelectBox}
+     */
+    setAllowTypeToSelect(allowTypeToSelect) {
+        const p = this._p;
+        allowTypeToSelect = !!allowTypeToSelect;
+        if (p.allowTypeToSelect === allowTypeToSelect)
+            return this;
+
+        p.allowTypeToSelect = allowTypeToSelect;
+        return this;
+    }
+
     /**
      * @returns {boolean}
      */
@@ -2221,11 +2237,17 @@ class SelectBox {
                         break;
 
                     default:
-                        if (!dropList.isVisible()) {
+                        if (dropList.isVisible()) {
+                            dropList._keydownFreeType(evt, false);
+                        } else if (p.allowTypeToSelect) {
+                            dropList._keydownFreeType(evt, true);
+                        } else {
                             this.openList();
+                            setTimeout(() => {
+                                if (this[DestroyedSymbol]) return; // destroyed by event handler
+                                dropList._keydownFreeType(evt, false);
+                            });
                         }
-
-                        dropList._keydownFreeType(evt);
                         break;
                 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.37",
+  "version": "2.0.39",
   "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

@@ -109,6 +109,10 @@ export const PropTypes = {
         type: Boolean,
         default: true,
     },
+    allowTypeToSelect: {
+        type: Boolean,
+        default: true,
+    },
     noResultsText: {
         type: String,
         required: false,
@@ -568,6 +572,11 @@ export default {
                 this.nonReactive.instance.setSearchable(value);
         },
 
+        allowTypeToSelect(value) {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.setAllowTypeToSelect(value);
+        },
+
         noResultsText(value) {
             if (this.nonReactive.instance)
                 this.nonReactive.instance.setNoResultsText(value ?? DefaultOptions.noResultsText);
@@ -827,6 +836,7 @@ export default {
                 blurOnSingleSelection: this.blurOnSingleSelection,
                 multi: this.multi,
                 searchable: this.searchable,
+                allowTypeToSelect: this.allowTypeToSelect,
                 noResultsText: this.noResultsText ?? DefaultOptions.noResultsText,
                 filterThrottleWindow: this.filterThrottleWindow ?? DefaultOptions.filterThrottleWindow ?? 0,
                 filterOnEmptyTerm: this.filterOnEmptyTerm,