Merge pull request #1271 from Xon/fix-1268

Fix v11 regression where `duplicateItemsAllowed` option did not work with `select-one`/`select-multiple`
Choices-js · Feb 22, 2025 · 5544387 · 5544387
2 parents 3bd4414 + d3756e8
commit 5544387
Show file tree

Hide file tree

Showing 17 changed files with 143 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -444,7 +444,7 @@ Pass an array of objects:
 
 **Type:** `Boolean` **Default:** `true`
 
-**Input types affected:** `text`
+**Input types affected:** `text`, `select-multiple`, `select-one`
 
 **Usage:** Whether duplicate inputted/chosen items are allowed
 

diff --git a/public/assets/scripts/choices.js b/public/assets/scripts/choices.js
@@ -4415,15 +4415,13 @@
             }
             if (canAddItem) {
                 var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-                if (this._isSelectElement) {
-                    // for exact matches, do not prompt to add it as a custom choice
-                    if (foundChoice) {
+                if (foundChoice) {
+                    if (this._isSelectElement) {
+                        // for exact matches, do not prompt to add it as a custom choice
                         this._displayNotice('', NoticeTypes.addChoice);
                         return false;
                     }
-                }
-                else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                    if (foundChoice) {
+                    if (!config.duplicateItemsAllowed) {
                         canAddItem = false;
                         notice = resolveNoticeFunction(config.uniqueItemText, value);
                     }
@@ -5006,8 +5004,7 @@
                 throw new TypeError('Can not re-add a choice which has already been added');
             }
             var config = this.config;
-            if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-                this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+            if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
                 return;
             }
             // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/assets/scripts/choices.min.js b/public/assets/scripts/choices.min.js
diff --git a/public/assets/scripts/choices.mjs b/public/assets/scripts/choices.mjs
@@ -4409,15 +4409,13 @@ var Choices = /** @class */ (function () {
         }
         if (canAddItem) {
             var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-            if (this._isSelectElement) {
-                // for exact matches, do not prompt to add it as a custom choice
-                if (foundChoice) {
+            if (foundChoice) {
+                if (this._isSelectElement) {
+                    // for exact matches, do not prompt to add it as a custom choice
                     this._displayNotice('', NoticeTypes.addChoice);
                     return false;
                 }
-            }
-            else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                if (foundChoice) {
+                if (!config.duplicateItemsAllowed) {
                     canAddItem = false;
                     notice = resolveNoticeFunction(config.uniqueItemText, value);
                 }
@@ -5000,8 +4998,7 @@ var Choices = /** @class */ (function () {
             throw new TypeError('Can not re-add a choice which has already been added');
         }
         var config = this.config;
-        if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-            this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+        if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
             return;
         }
         // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/assets/scripts/choices.search-basic.js b/public/assets/scripts/choices.search-basic.js
@@ -3933,15 +3933,13 @@
             }
             if (canAddItem) {
                 var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-                if (this._isSelectElement) {
-                    // for exact matches, do not prompt to add it as a custom choice
-                    if (foundChoice) {
+                if (foundChoice) {
+                    if (this._isSelectElement) {
+                        // for exact matches, do not prompt to add it as a custom choice
                         this._displayNotice('', NoticeTypes.addChoice);
                         return false;
                     }
-                }
-                else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                    if (foundChoice) {
+                    if (!config.duplicateItemsAllowed) {
                         canAddItem = false;
                         notice = resolveNoticeFunction(config.uniqueItemText, value);
                     }
@@ -4524,8 +4522,7 @@
                 throw new TypeError('Can not re-add a choice which has already been added');
             }
             var config = this.config;
-            if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-                this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+            if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
                 return;
             }
             // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/assets/scripts/choices.search-basic.min.js b/public/assets/scripts/choices.search-basic.min.js
diff --git a/public/assets/scripts/choices.search-basic.mjs b/public/assets/scripts/choices.search-basic.mjs
@@ -3927,15 +3927,13 @@ var Choices = /** @class */ (function () {
         }
         if (canAddItem) {
             var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-            if (this._isSelectElement) {
-                // for exact matches, do not prompt to add it as a custom choice
-                if (foundChoice) {
+            if (foundChoice) {
+                if (this._isSelectElement) {
+                    // for exact matches, do not prompt to add it as a custom choice
                     this._displayNotice('', NoticeTypes.addChoice);
                     return false;
                 }
-            }
-            else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                if (foundChoice) {
+                if (!config.duplicateItemsAllowed) {
                     canAddItem = false;
                     notice = resolveNoticeFunction(config.uniqueItemText, value);
                 }
@@ -4518,8 +4516,7 @@ var Choices = /** @class */ (function () {
             throw new TypeError('Can not re-add a choice which has already been added');
         }
         var config = this.config;
-        if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-            this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+        if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
             return;
         }
         // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/assets/scripts/choices.search-prefix.js b/public/assets/scripts/choices.search-prefix.js
@@ -2775,15 +2775,13 @@
             }
             if (canAddItem) {
                 var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-                if (this._isSelectElement) {
-                    // for exact matches, do not prompt to add it as a custom choice
-                    if (foundChoice) {
+                if (foundChoice) {
+                    if (this._isSelectElement) {
+                        // for exact matches, do not prompt to add it as a custom choice
                         this._displayNotice('', NoticeTypes.addChoice);
                         return false;
                     }
-                }
-                else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                    if (foundChoice) {
+                    if (!config.duplicateItemsAllowed) {
                         canAddItem = false;
                         notice = resolveNoticeFunction(config.uniqueItemText, value);
                     }
@@ -3366,8 +3364,7 @@
                 throw new TypeError('Can not re-add a choice which has already been added');
             }
             var config = this.config;
-            if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-                this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+            if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
                 return;
             }
             // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/assets/scripts/choices.search-prefix.min.js b/public/assets/scripts/choices.search-prefix.min.js
diff --git a/public/assets/scripts/choices.search-prefix.mjs b/public/assets/scripts/choices.search-prefix.mjs
@@ -2769,15 +2769,13 @@ var Choices = /** @class */ (function () {
         }
         if (canAddItem) {
             var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });
-            if (this._isSelectElement) {
-                // for exact matches, do not prompt to add it as a custom choice
-                if (foundChoice) {
+            if (foundChoice) {
+                if (this._isSelectElement) {
+                    // for exact matches, do not prompt to add it as a custom choice
                     this._displayNotice('', NoticeTypes.addChoice);
                     return false;
                 }
-            }
-            else if (this._isTextElement && !config.duplicateItemsAllowed) {
-                if (foundChoice) {
+                if (!config.duplicateItemsAllowed) {
                     canAddItem = false;
                     notice = resolveNoticeFunction(config.uniqueItemText, value);
                 }
@@ -3360,8 +3358,7 @@ var Choices = /** @class */ (function () {
             throw new TypeError('Can not re-add a choice which has already been added');
         }
         var config = this.config;
-        if ((this._isSelectElement || !config.duplicateItemsAllowed) &&
-            this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
+        if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {
             return;
         }
         // Generate unique id, in-place update is required so chaining _addItem works as expected

diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html
@@ -176,6 +176,42 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="duplicate-items-allowed">
+          <label for="duplicate-items-allowed">Duplicate items allowed</label>
+          <select class="form-control" name="no-choices" id="duplicate-items-allowed" multiple>
+            <option value="call1">Service 1</option>
+            <option value="call2">Service 2</option>
+            <option value="call2">Service 3</option>
+            <option value="call1">Service 4</option>
+            <option value="call5">Service 5</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#duplicate-items-allowed', {
+                duplicateItemsAllowed: true,
+              });
+            });
+          </script>
+        </div>
+
+        <div data-test-hook="duplicate-items-disallowed">
+          <label for="duplicate-items-disallowed">Duplicate items disallowed</label>
+          <select class="form-control" name="no-choices" id="duplicate-items-disallowed" multiple>
+            <option value="call1">Service 1</option>
+            <option value="call2">Service 2</option>
+            <option value="call2">Service 3</option>
+            <option value="call1">Service 4</option>
+            <option value="call5">Service 5</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#duplicate-items-disallowed', {
+                duplicateItemsAllowed: false,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="no-choices">
           <label for="no-choices">No choices</label>
           <select class="form-control" name="no-choices" id="no-choices" multiple>

diff --git a/public/test/select-one/index.html b/public/test/select-one/index.html
@@ -192,6 +192,42 @@ <h2>Select one inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="duplicate-items-allowed">
+          <label for="duplicate-items-allowed">Duplicate items allowed</label>
+          <select class="form-control" name="no-choices" id="duplicate-items-allowed">
+            <option value="call1">Service 1</option>
+            <option value="call2">Service 2</option>
+            <option value="call2">Service 3</option>
+            <option value="call1">Service 4</option>
+            <option value="call5">Service 5</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#duplicate-items-allowed', {
+                duplicateItemsAllowed: true,
+              });
+            });
+          </script>
+        </div>
+
+        <div data-test-hook="duplicate-items-disallowed">
+          <label for="duplicate-items-disallowed">Duplicate items disallowed</label>
+          <select class="form-control" name="no-choices" id="duplicate-items-disallowed">
+            <option value="call1">Service 1</option>
+            <option value="call2">Service 2</option>
+            <option value="call2">Service 3</option>
+            <option value="call1">Service 4</option>
+            <option value="call5">Service 5</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#duplicate-items-disallowed', {
+                duplicateItemsAllowed: false,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="no-choices">
           <label for="no-choices">No choices</label>
           <select class="form-control" name="no-choices" id="no-choices">

diff --git a/public/types/src/scripts/interfaces/options.d.ts b/public/types/src/scripts/interfaces/options.d.ts
@@ -259,7 +259,7 @@ export interface Options {
     /**
      * Whether each inputted/chosen item should be unique.
      *
-     * **Input types affected:** text
+     * **Input types affected:** text, `select-multiple`, `select-one`
      *
      * @default true
      */

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
@@ -1423,15 +1423,14 @@ class Choices {
 
     if (canAddItem) {
       const foundChoice = this._store.choices.find((choice) => config.valueComparer(choice.value, value));
-      if (this._isSelectElement) {
-        // for exact matches, do not prompt to add it as a custom choice
-        if (foundChoice) {
+      if (foundChoice) {
+        if (this._isSelectElement) {
+          // for exact matches, do not prompt to add it as a custom choice
           this._displayNotice('', NoticeTypes.addChoice);
 
           return false;
         }
-      } else if (this._isTextElement && !config.duplicateItemsAllowed) {
-        if (foundChoice) {
+        if (!config.duplicateItemsAllowed) {
           canAddItem = false;
           notice = resolveNoticeFunction(config.uniqueItemText, value);
         }
@@ -2105,10 +2104,7 @@ class Choices {
     }
 
     const { config } = this;
-    if (
-      (this._isSelectElement || !config.duplicateItemsAllowed) &&
-      this._store.choices.find((c) => config.valueComparer(c.value, choice.value))
-    ) {
+    if (!config.duplicateItemsAllowed && this._store.choices.find((c) => config.valueComparer(c.value, choice.value))) {
       return;
     }
 

diff --git a/src/scripts/interfaces/options.ts b/src/scripts/interfaces/options.ts
@@ -279,7 +279,7 @@ export interface Options {
   /**
    * Whether each inputted/chosen item should be unique.
    *
-   * **Input types affected:** text
+   * **Input types affected:** text, `select-multiple`, `select-one`
    *
    * @default true
    */

diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
@@ -376,6 +376,21 @@ describe(`Choices - select multiple`, () => {
       });
     });
 
+    describe('duplicate-items', () => {
+      test('shows all duplicate items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, 'duplicate-items-allowed');
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(5);
+      });
+      test('shows unique items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, 'duplicate-items-disallowed');
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(3);
+      });
+    });
+
     describe('no choices', () => {
       const testId = 'no-choices';
       test('shows no choices banner', async ({ page, bundle }) => {

diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
@@ -269,6 +269,21 @@ describe(`Choices - select one`, () => {
       });
     });
 
+    describe('duplicate-items', () => {
+      test('shows all duplicate items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, 'duplicate-items-allowed');
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(5);
+      });
+      test('shows unique items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, 'duplicate-items-disallowed');
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(3);
+      });
+    });
+
     describe('no choices', () => {
       const testId = 'no-choices';
       test('shows no choices banner', async ({ page, bundle }) => {