@danielgindi/selectbox 2.0.36 → 2.0.38

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.36
+ * @danielgindi/selectbox 2.0.38
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -2737,14 +2737,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
@@ -2803,7 +2803,7 @@ class DropList {
             let next = p.virtualListHelper.getItemElementAt(matchIndex);
             this._focus(evt, next || null, matchIndex, true);
 
-            if (!this.isVisible()) {
+            if (autoSelect) {
                 this.triggerItemSelection(next ? null : items[matchIndex], evt);
             }
 
@@ -3420,6 +3420,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
@@ -3550,6 +3551,7 @@ class SelectBox {
             showPlaceholderInTooltip: o.showPlaceholderInTooltip,
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
+            allowTypeToSelect: o.allowTypeToSelect,
             noResultsText: o.noResultsText,
             autoSelectTextOnCheck: o.autoSelectTextOnCheck,
 
@@ -4332,6 +4334,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}
      */
@@ -5531,7 +5547,15 @@ class SelectBox {
                         break;
 
                     default:
-                        dropList._keydownFreeType(evt);
+                        if (p.allowTypeToSelect) {
+                            dropList._keydownFreeType(evt, true);
+                        } else {
+                            this.openList();
+                            setTimeout(() => {
+                                if (this[DestroyedSymbol]) return; // destroyed by event handler
+                                dropList._keydownFreeType(evt, false);
+                            });
+                        }
                         break;
                 }