before: addItems was basically just an alias for disable, now: addIte…

…ms controls if user can add choices/items
Choices-js · Jul 25, 2023 · 36a5a0b · 36a5a0b
1 parent cf34edd
commit 36a5a0b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/cypress/e2e/text.spec.ts b/cypress/e2e/text.spec.ts
@@ -304,10 +304,28 @@ describe('Choices - text element', () => {
     });
 
     describe('adding items disabled', () => {
-      it('does not allow me to input data', () => {
-        cy.get('[data-test-hook=adding-items-disabled]')
+      /*
+        {
+          addItems: false,
+        }
+      */
+      beforeEach(() => {
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices')
+          .click();
+      });
+      it('disables adding new items', () => {
+        const newChoice = 'New Choice';
+        cy.get('[data-test-hook=add-items-disabled]')
           .find('.choices__input--cloned')
-          .should('be.disabled');
+          .type(newChoice)
+          .type('{enter}');
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices__list--multiple')
+          .last()
+          .should($el => {
+            expect($el).to.not.contain(newChoice);
+          });
       });
     });
 

diff --git a/public/test/text/index.html b/public/test/text/index.html
@@ -105,11 +105,11 @@ <h2>Text inputs</h2>
           />
         </div>
 
-        <div data-test-hook="adding-items-disabled">
-          <label for="choices-adding-items-disabled">Add items disabled</label>
+        <div data-test-hook="add-items-disabled">
+          <label for="choices-add-items-disabled">Add items disabled</label>
           <input
             class="form-control"
-            id="choices-adding-items-disabled"
+            id="choices-add-items-disabled"
             type="text"
           />
         </div>

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
@@ -347,10 +347,7 @@ class Choices implements Choices {
     this._render();
     this._addEventListeners();
 
-    let shouldDisable = this.passedElement.element.hasAttribute('disabled');
-    if (this._isTextElement) {
-      shouldDisable = shouldDisable || !this.config.addItems;
-    }
+    const shouldDisable = this.passedElement.element.hasAttribute('disabled');
 
     if (shouldDisable) {
       this.disable();
@@ -1562,7 +1559,8 @@ class Choices implements Choices {
     // 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 = canAddItem.notice && value;
+      const canShowDropdownNotice =
+        this.config.addItems && canAddItem.notice && value;
 
       if (canShowDropdownNotice) {
         const dropdownItem = this._getTemplate('notice', canAddItem.notice);

diff --git a/src/scripts/interfaces/options.ts b/src/scripts/interfaces/options.ts
@@ -103,7 +103,7 @@ export interface Options {
   maxItemCount: number;
 
   /**
-   * Whether a user can add items.
+   * Whether a user can add new items.
    *
    * **Input types affected:** text, select, select-multiple
    *