Merge pull request #1366 from Choices-js/fix-searchEnabled-select-multiple

Fix `searchEnabled` being disabled for `select-multiple` did not work

Author: Xon

CHANGELOG.md

@@ -19,8 +19,9 @@
 - Define `[aria-selected]` for selectable choices per WAI-ARIA 1.2 spec, and avoid triple state with aria-selected [#1330](https://github.com/Choices-js/Choices/pull/1330)
 - Fix `appendGroupInSearch` option was non-functional [#1324](https://github.com/Choices-js/Choices/pull/1324)
 - When resolving the remove item/label/icon, add a 3rd argument item argument. Update default remove item label to use this (Fixes #1296) [#1323](https://github.com/Choices-js/Choices/pull/1323)
-- Fix `searchResultLimit` could not be set to -1 when renderChoiceLimit was set [#1322](https://github.com/Choices-js/Choices/pull/1322)
+- Fix `searchResultLimit` could not be set to `-1` when `renderChoiceLimit` was set [#1322](https://github.com/Choices-js/Choices/pull/1322)
 - Fix dropdown would stick closed when a search loses focus [#1308](https://github.com/Choices-js/Choices/pull/1308)
+- Fix `searchEnabled` being disabled for `select-multiple` did not work [#1366](https://github.com/Choices-js/Choices/pull/1366)
 
 ### Chore
 - Update callback argument documentation

public/test/select-multiple/index.html

@@ -478,6 +478,28 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="search-disabled">
+          <label for="choices-search-disabled">Search disabled</label>
+          <select
+            class="form-control"
+            name="choices-search-disabled"
+            id="choices-search-disabled"
+            multiple
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#choices-search-disabled', {
+                allowHTML: true,
+                searchEnabled: false,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="search-floor">
           <label for="choices-search-floor">Search floor</label>
           <select

src/scripts/choices.ts

@@ -260,7 +260,7 @@ class Choices {
 
     this._store = new Store(config);
     this._currentValue = '';
-    config.searchEnabled = (!isText && config.searchEnabled) || isSelectMultiple;
+    config.searchEnabled = !isText && config.searchEnabled;
     this._canSearch = config.searchEnabled;
     this._isScrollingOnIe = false;
     this._highlightPosition = 0;
@@ -2288,26 +2288,26 @@ class Choices {
     // Wrapper inner container with outer container
     containerOuter.wrap(containerInner.element);
 
+    containerOuter.element.appendChild(containerInner.element);
+    containerOuter.element.appendChild(dropdownElement);
+    containerInner.element.appendChild(this.itemList.element);
+    dropdownElement.appendChild(this.choiceList.element);
+
     if (this._isSelectOneElement) {
       this.input.placeholder = this.config.searchPlaceholderValue || '';
+      if (this.config.searchEnabled) {
+        dropdownElement.insertBefore(this.input.element, dropdownElement.firstChild);
+      }
     } else {
+      if (!this._isSelectMultipleElement || this.config.searchEnabled) {
+        containerInner.element.appendChild(this.input.element);
+      }
       if (this._placeholderValue) {
         this.input.placeholder = this._placeholderValue;
       }
       this.input.setWidth();
     }
 
-    containerOuter.element.appendChild(containerInner.element);
-    containerOuter.element.appendChild(dropdownElement);
-    containerInner.element.appendChild(this.itemList.element);
-    dropdownElement.appendChild(this.choiceList.element);
-
-    if (!this._isSelectOneElement) {
-      containerInner.element.appendChild(this.input.element);
-    } else if (this.config.searchEnabled) {
-      dropdownElement.insertBefore(this.input.element, dropdownElement.firstChild);
-    }
-
     this._highlightPosition = 0;
     this._isSearching = false;
   }

test-e2e/tests/select-multiple.spec.ts

@@ -595,7 +595,6 @@ describe(`Choices - select multiple`, () => {
       });
     });
 
-    /*
     describe('search disabled', () => {
       const testId = 'search-disabled';
       test('does not display a search input', async ({ page, bundle }) => {
@@ -616,10 +615,9 @@ describe(`Choices - select multiple`, () => {
 
         await suite.expectedItemCount(1);
         await suite.expectedValue(text);
-        await suite.expectHiddenDropdown();
+        await suite.expectVisibleDropdown();
       });
     });
-    */
 
     describe('search floor', () => {
       const testId = 'search-floor';

test/scripts/choices.test.ts

@@ -98,7 +98,7 @@ describe('choices', () => {
                 searchEnabled: false,
               });
 
-              expect(instance.config.searchEnabled).to.equal(true);
+              expect(instance.config.searchEnabled).to.equal(false);
             });
           });
         });