@danielgindi/selectbox 2.0.11 → 2.0.13

package/lib/DropList.js

@@ -1297,7 +1297,14 @@ class DropList {
      * @returns {DropList}
      */
     setNoResultsText(noResultsText) {
-        this._p.noResultsText = noResultsText;
+        const p = this._p;
+
+        p.noResultsText = noResultsText;
+
+        if (p.hasNoResultsItem) {
+            p.virtualListHelper.refreshItemAt(0).render();
+        }
+
         return this;
     }
 

package/lib/SelectBox.js

@@ -117,6 +117,8 @@ const inputBackbufferCssProps = [
  * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
  * @property {function(name: string, ...args)} [on]
  * @property {boolean} [isLoadingMode]
+ * @property {boolean} [closeListWhenLoading] whether we should close the list automatically when loading
+ * @property {string[]} [clearInputWhen=['single_close','multi_select_single']] clear input box when closing the droplist or selecting <code>['single_close', 'multi_close', 'multi_select_single']</code>
  * */
 const defaultOptions = {
     el: null,
@@ -151,6 +153,8 @@ const defaultOptions = {
     selectedValues: undefined,
     value: undefined,
     isLoadingMode: false,
+    closeListWhenLoading: true,
+    clearInputWhen: ['single_close', 'multi_select_single'],
 };
 
 /**
@@ -256,6 +260,8 @@ class SelectBox {
             mitt: mitt(),
 
             isLoadingMode: !!o.isLoadingMode,
+            closeListWhenLoading: !!o.closeListWhenLoading,
+            clearInputWhen: Array.isArray(o.clearInputWhen) ? o.clearInputWhen.slice(0) : [],
 
             items: [],
             itemsChanged: true,
@@ -1402,6 +1408,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;
@@ -1467,9 +1475,9 @@ class SelectBox {
 
         p.isLoadingMode = isLoadingMode;
 
-        if (p.isLoadingMode && p.items.length === 0 && this.isListOpen()) {
+        if (p.isLoadingMode && p.closeListWhenLoading && p.items.length === 0 && this.isListOpen()) {
             this.closeList();
-        } else if (!p.isLoadingMode && document.activeElement &&
+        } else if (!p.isLoadingMode && p.closeListWhenLoading && document.activeElement &&
             ((p.multi || p.searchable) && p.input.contains(document.activeElement) ||
                 (!p.multi && !p.searchable) && p.el.contains(document.activeElement))) {
             this.openList();
@@ -1486,6 +1494,41 @@ class SelectBox {
         return this._p.isLoadingMode;
     }
 
+    /**
+     * Sets whether to close the list when loading mode is enabled
+     * @param {boolean} closeListWhenLoading
+     * @returns {SelectBox}
+     */
+    setCloseListWhenLoading(closeListWhenLoading) {
+        this._p.closeListWhenLoading = closeListWhenLoading;
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    getCloseListWhenLoading() {
+        return this._p.closeListWhenLoading;
+    }
+
+    /**
+     * Sets when to clear the input field
+     * @param {string[]} clearInputWhen
+     * @returns {SelectBox}
+     */
+    setClearInputWhen(clearInputWhen) {
+        this._p.clearInputWhen = Array.isArray(clearInputWhen) ? clearInputWhen.slice(0) : [];
+        return this;
+    }
+
+    /**
+     * Retrieves the settings for when to clear the input field
+     * @returns {string[]}
+     */
+    getClearInputWhen() {
+        return this._p.clearInputWhen;
+    }
+
     /**
      * Sets the appropriate direction for the selectbox
      * @param {'ltr'|'rtl'|'auto'} direction
@@ -1859,8 +1902,12 @@ class SelectBox {
                         p.el.classList.add(`${p.baseClassName}__closed_list`);
 
                         if (!p.multi) {
-                            this._setInputText('');
+                            if (p.clearInputWhen.includes('single_close'))
+                                this._setInputText('');
                             this._scheduleSync('render_base');
+                        } else {
+                            if (p.clearInputWhen.includes('multi_close'))
+                                this._setInputText('');
                         }
 
                         this._trigger('close');
@@ -1916,7 +1963,7 @@ class SelectBox {
 
                         if (p.showSelection) {
                             if (checked) {
-                                if (dropList.itemCount() === 1) {
+                                if (dropList.itemCount() === 1 && p.clearInputWhen.includes('multi_select_single')) {
                                     this._setInputText('');
                                 }
 
@@ -2186,8 +2233,6 @@ class SelectBox {
 
                     p.filterTerm = p.input.value.trim();
                     p.dropList?.setSearchTerm(p.filterTerm, true);
-
-                    this._trigger('search', { value: p.input.value });
                 })
                 .add(p.input, 'click.dropdown', () => {
                     if (p.disabled) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "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/DropList.vue

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

package/vue/SelectBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="el" />
+  <span ref="el" />
 </template>
 
 <script>