Use internal flag for enabling/disabling search

public/index.html

@@ -74,10 +74,10 @@
       <input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder">
 
       <label for="choices-text-i18n">I18N labels</label>
-      <input class="form-control" data-trigger id="choices-text-i18n" type="text">
+      <input class="form-control" id="choices-text-i18n" type="text">
 
       <label for="choices-text-rtl">Right-to-left</label>
-      <input class="form-control" data-trigger id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
+      <input class="form-control" id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
 
       <hr>
 
@@ -293,7 +293,7 @@
         </select>
 
         <label for="reset-multiple">And me!</label>
-        <select class="form-control" data-trigger name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
+        <select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
           multiple>
           <option value="Dropdown item 1" selected>Dropdown item 1</option>
           <option value="Dropdown item 2">Dropdown item 2</option>

src/scripts/choices.js

@@ -104,12 +104,14 @@ class Choices {
       );
     }
 
-    this._store = new Store(this.render);
     this.initialised = false;
+
+    this._store = new Store(this.render);
     this._initialState = {};
     this._currentState = {};
     this._prevState = {};
     this._currentValue = '';
+    this._canSearch = this.config.searchEnabled;
     this._isScrollingOnIe = false;
     this._highlightPosition = 0;
     this._wasTap = true;
@@ -142,7 +144,9 @@ class Choices {
 
     // If element has already been initialised with Choices, fail silently
     if (this.passedElement.element.getAttribute('data-choice') === 'active') {
-      return false;
+      console.warn(
+        'Trying to initialise Choices on element already initialised',
+      );
     }
 
     // Let's go
@@ -158,23 +162,16 @@ class Choices {
       return;
     }
 
-    // Set initialise flag
-    this.initialised = true;
-    // Create required templates
     this._createTemplates();
-    // Create required elements
     this._createElements();
-    // Generate input markup
     this._createStructure();
     // Set initial state (We need to clone the state because some reducers
     // modify the inner objects properties in the state) 🤢
     this._initialState = cloneObject(this._store.state);
-    // Subscribe store to render method
     this._store.subscribe(this.render);
-    // Render any items
     this.render();
-    // Trigger event listeners
     this._addEventListeners();
+    this.initialised = true;
 
     const { callbackOnInit } = this.config;
     // Run callback if it is a function
@@ -349,7 +346,7 @@ class Choices {
       this.dropdown.show();
       this.containerOuter.open(this.dropdown.distanceFromTopWindow());
 
-      if (!preventInputFocus && this.config.searchEnabled) {
+      if (!preventInputFocus && this._canSearch) {
         this.input.focus();
       }
 
@@ -368,7 +365,7 @@ class Choices {
       this.dropdown.hide();
       this.containerOuter.close();
 
-      if (!preventInputBlur && this.config.searchEnabled) {
+      if (!preventInputBlur && this._canSearch) {
         this.input.removeActiveDescendant();
         this.input.blur();
       }
@@ -380,12 +377,7 @@ class Choices {
   }
 
   toggleDropdown() {
-    if (this.dropdown.isActive) {
+    this.dropdown.isActive ? this.hideDropdown() : this.showDropdown();
-      this.hideDropdown();
-    } else {
-      this.showDropdown();
-    }
-
     return this;
   }
 
@@ -463,7 +455,7 @@ class Choices {
     const shouldSetInputWidth = !this._isSelectOneElement;
     this.input.clear(shouldSetInputWidth);
 
-    if (!this._isTextElement && this.config.searchEnabled) {
+    if (!this._isTextElement && this._canSearch) {
       this._isSearching = false;
       this._store.dispatch(activateChoices(true));
     }
@@ -1023,7 +1015,7 @@ class Choices {
     const onAKey = () => {
       // If CTRL + A or CMD + A have been pressed and there are items to select
       if (ctrlDownKey && hasItems) {
-        this.config.searchEnabled = false;
+        this._canSearch = false;
         if (
           this.config.removeItems &&
           !this.input.value &&
@@ -1086,10 +1078,8 @@ class Choices {
     const onDirectionKey = () => {
       // If up or down key is pressed, traverse through options
       if (hasActiveDropdown || this._isSelectOneElement) {
-        // Show dropdown if focus
         this.showDropdown();
-
+        this._canSearch = false;
-        this.config.searchEnabled = false;
 
         const directionInt =
           keyCode === downKey || keyCode === pageDownKey ? 1 : -1;
@@ -1207,12 +1197,12 @@ class Choices {
           this._isSearching = false;
           this._store.dispatch(activateChoices(true));
         }
-      } else if (this.config.searchEnabled && canAddItem.response) {
+      } else if (this._canSearch && canAddItem.response) {
         this._handleSearch(this.input.value);
       }
     }
-    // Re-establish canSearch value from changes in _onKeyDown
+
-    this.config.searchEnabled = this.config.searchEnabled;
+    this._canSearch = this.config.searchEnabled;
   }
 
   _onTouchMove() {
@@ -1373,8 +1363,7 @@ class Choices {
           this.containerOuter.removeFocusState();
           if (
             target === this.input.element ||
-            (target === this.containerOuter.element &&
+            (target === this.containerOuter.element && !this._canSearch)
-              !this.config.searchEnabled)
           ) {
             this.hideDropdown(true);
           }
@@ -1780,9 +1769,7 @@ class Choices {
         );
       }
 
-      passedGroups.forEach(group => {
+      passedGroups.forEach(group => this._addGroup(group, group.id || null));
-        this._addGroup(group, group.id || null);
-      });
     } else {
       const passedOptions = this.passedElement.options;
       const filter = this.config.sortFn;