@danielgindi/selectbox 2.0.10 → 2.0.12

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.10
+ * @danielgindi/selectbox 2.0.12
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -3414,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]
@@ -3441,6 +3442,7 @@ const defaultOptions = {
     multiPlaceholderFormatter: null,
     searchable: true,
     noResultsText: 'No matching results',
+    autoSelectTextOnCheck: true,
     filterThrottleWindow: 300,
     filterOnEmptyTerm: false,
     labelProp: 'label',
@@ -3535,6 +3537,7 @@ class SelectBox {
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
             noResultsText: o.noResultsText,
+            autoSelectTextOnCheck: o.autoSelectTextOnCheck,
 
             labelProp: o.labelProp,
             valueProp: o.valueProp,
@@ -4309,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}
@@ -4686,6 +4705,8 @@ class SelectBox {
 
         if (p.dropList.hasFocusedItem()) {
             p.dropList.setFocusedItemAtIndex(p.dropList.getFocusedItemIndex());
+        } else if (!p.multi && this.getValue() !== undefined) {
+            p.dropList.setFocusedItemByValue(this.getValue());
         }
 
         return this;
@@ -5159,6 +5180,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;
 
@@ -5239,6 +5265,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');
                         }