fix unique dropdown for multi-select select boxes

Choices-js · Apr 20, 2020 · 72ca731 · 72ca731
1 parent ac30fd2
commit 72ca731
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/cypress/integration/select-multiple.spec.ts b/cypress/integration/select-multiple.spec.ts
@@ -277,6 +277,41 @@ describe('Choices - select multiple', () => {
       });
     });
 
+    describe('unique values only', () => {
+      describe('unique values', () => {
+        beforeEach(() => {
+          cy.get('[data-test-hook=unique-values]')
+            .find('.choices__input--cloned')
+            .type('Choice 1')
+            .type('{enter}');
+        });
+
+        it('only allows me to input unique values', () => {
+          cy.get('[data-test-hook=unique-values]')
+            .find('.choices__list--multiple')
+            .first()
+            .children()
+            .should($items => {
+              expect($items.length).to.equal(1);
+            });
+        });
+
+        describe('inputting a non-unique value', () => {
+          it('displays dropdown prompt', () => {
+            cy.get('[data-test-hook=unique-values]')
+              .find('.choices__list--dropdown')
+              .should('be.visible')
+              .should($dropdown => {
+                const dropdownText = $dropdown.text().trim();
+                expect(dropdownText).to.equal(
+                  'Only unique values can be added',
+                );
+              });
+          });
+        });
+      });
+    });
+
     describe('disabled choice', () => {
       describe('selecting a disabled choice', () => {
         beforeEach(() => {

diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html
@@ -88,6 +88,22 @@ <h2>Select multiple inputs</h2>
           </select>
         </div>
 
+        <div data-test-hook="unique-values">
+          <label for="choices-unique-values">Unique values</label>
+          <select
+            class="form-control"
+            name="choices-unique-values"
+            id="choices-unique-values"
+            multiple
+          >
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+            <option value="Choice 4">Choice 4</option>
+          </select>
+        </div>
+
         <div data-test-hook="disabled-choice">
           <label for="choices-disabled-choice">Disabled choice</label>
           <select
@@ -381,6 +397,10 @@ <h2>Select multiple inputs</h2>
           removeItemButton: true,
         });
 
+        new Choices('#choices-unique-values', {
+          duplicateItemsAllowed: false,
+        });
+
         new Choices('#choices-disabled-choice');
 
         new Choices('#choices-add-items', {

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
@@ -1516,13 +1516,12 @@ class Choices {
     const { activeItems } = this._store;
     const canAddItem = this._canAddItem(activeItems, value);
     const { BACK_KEY: backKey, DELETE_KEY: deleteKey } = KEY_CODES;
+    const canShowDropdownNotice =
+      this.config.addItems && canAddItem.notice && value;
 
     // We are typing into a text input and have a value, we want to show a dropdown
     // notice. Otherwise hide the dropdown
     if (this._isTextElement) {
-      const canShowDropdownNotice =
-        this.config.addItems && canAddItem.notice && value;
-
       if (canShowDropdownNotice) {
         const dropdownItem = this._getTemplate('notice', canAddItem.notice);
         this.dropdown.element.innerHTML = dropdownItem.outerHTML;
@@ -1540,7 +1539,7 @@ class Choices {
       if (userHasRemovedValue && canReactivateChoices) {
         this._isSearching = false;
         this._store.dispatch(activateChoices(true));
-      } else if (canSearch) {
+      } else if (canSearch || canShowDropdownNotice) {
         this._handleSearch(this.input.value);
       }
     }