Merge remote-tracking branch 'joeworkman-forks/addchoices' into main

ref: #1117
Choices-js · Jul 23, 2024 · a88f4f8 · a88f4f8
2 parents 9359f5c + 61e48f8
commit a88f4f8
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -122,6 +122,7 @@ Or include Choices directly:
     choices: [],
     renderChoiceLimit: -1,
     maxItemCount: -1,
+    addChoices: false,
     addItems: true,
     addItemFilter: null,
     removeItems: true,
@@ -304,6 +305,15 @@ Pass an array of objects:
 
 **Usage:** The amount of items a user can input/select ("-1" indicates no limit).
 
+### addChoices
+**Type**: `Boolean` **Default:** `false`
+
+**Input types affected:** `select-multiple`, `select-one`
+
+**Usage:** Whether a user can add choices
+
+**Note:** `addItems` must also be `true`
+
 ### addItems
 
 **Type:** `Boolean` **Default:** `true`

diff --git a/cypress/e2e/select-multiple.spec.ts b/cypress/e2e/select-multiple.spec.ts
@@ -1019,6 +1019,24 @@ describe('Choices - select multiple', () => {
             });
         });
       });
+
+      describe('adding user-created choices', () => {
+        it('allows the user to add choices', () => {
+          const newChoice = 'New Choice';
+
+          cy.get('[data-test-hook=add-choices]')
+            .find('.choices__input--cloned')
+            .type(newChoice)
+            .type('{enter}');
+
+          cy.get('[data-test-hook=add-choices]')
+            .find('.choices__list--multiple')
+            .last()
+            .should($el => {
+              expect($el).to.contain(newChoice);
+            });
+        });
+      });
     });
   });
 });
diff --git a/cypress/e2e/select-one.spec.ts b/cypress/e2e/select-one.spec.ts
@@ -1145,5 +1145,26 @@ describe('Choices - select one', () => {
           .should('have.length', 3);
       });
     });
+
+    describe('adding user-created choices', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=add-choices]').find('.choices').click();
+      });
+
+      it('allows the user to add choices', () => {
+        const newChoice = 'New Choice';
+
+        cy.get('[data-test-hook=add-choices]')
+          .find('.choices__input--cloned')
+          .type(newChoice)
+          .type('{enter}');
+
+        cy.get('[data-test-hook=add-choices]')
+          .find('.choices__list--single .choices__item')
+          .should(($el) => {
+            expect($el).to.contain(newChoice);
+          });
+      });
+    });
   });
 });
diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html
@@ -414,6 +414,15 @@ <h2>Select multiple inputs</h2>
             multiple
           ></select>
         </div>
+
+        <div data-test-hook="add-choices">
+          <label for="choices-add-choices">Add choices</label>
+          <select class="form-control" name="choices-add-choices" id="choices-add-choices" multiple>
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
       </div>
     </div>
     <script>
@@ -643,6 +652,8 @@ <h2>Select multiple inputs</h2>
             },
           ],
         });
+
+        new Choices('#choices-add-choices', { addChoices: true });
       });
     </script>
   </body>

diff --git a/public/test/select-one/index.html b/public/test/select-one/index.html
@@ -417,6 +417,16 @@ <h2>Select one inputs</h2>
           <button class="destroy">Destroy</button>
           <button class="init">Init</button>
         </div>
+
+        <div data-test-hook="add-choices">
+          <label for="choices-add-choices">Add choices</label>
+          <select class="form-control" name="choices-add-choices" id="choices-add-choices">
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
+
       </div>
     </div>
     <script>
@@ -676,6 +686,8 @@ <h2>Select one inputs</h2>
         document.querySelector('button.init').addEventListener('click', () => {
           newDestroyInitChoices.init();
         });
+
+        new Choices('#choices-add-choices', { addChoices: true });
       });
     </script>
   </body>

diff --git a/public/types/src/scripts/choices.d.ts b/public/types/src/scripts/choices.d.ts
@@ -150,6 +150,7 @@ declare class Choices implements Choices {
     _stopLoading(): void;
     _handleLoadingState(setLoading?: boolean): void;
     _handleSearch(value: string): void;
+    _canAddChoice(activeItems: Item[], value: string): Notice;
     _canAddItem(activeItems: Item[], value: string): Notice;
     _searchChoices(value: string): number;
     _addEventListeners(): void;

diff --git a/public/types/src/scripts/interfaces/options.d.ts b/public/types/src/scripts/interfaces/options.d.ts
@@ -106,6 +106,14 @@ export interface Options {
      * @default false
      */
     pseudoMultiSelectForSingle: boolean;
+    /**
+     * Whether a user can add choices dynamically.
+     *
+     * **Input types affected:** select-one, select-multiple
+     *
+     * @default false
+     */
+    addChoices: boolean;
     /**
      * Whether a user can add items.
      *

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
@@ -827,12 +827,12 @@ class Choices implements Choices {
       );
     }
 
-    // If we have choices to show
+    const { activeItems } = this._store; // If we have choices to show
+
     if (
       choiceListFragment.childNodes &&
       choiceListFragment.childNodes.length > 0
     ) {
-      const { activeItems } = this._store;
       const canAddItem = this._canAddItem(activeItems, this.input.value);
 
       // ...and we can select them
@@ -846,18 +846,21 @@ class Choices implements Choices {
       }
     } else {
       // Otherwise show a notice
+      const canAddChoice = this._canAddChoice(activeItems, this.input.value);
+
       let dropdownItem;
-      let notice;
 
-      if (this._isSearching) {
-        notice =
+      if (canAddChoice.response) {
+        dropdownItem = this._getTemplate('notice', canAddChoice.notice);
+      } else if (this._isSearching) {
+        const notice =
           typeof this.config.noResultsText === 'function'
             ? this.config.noResultsText()
             : this.config.noResultsText;
 
         dropdownItem = this._getTemplate('notice', notice, 'no-results');
       } else {
-        notice =
+        const notice =
           typeof this.config.noChoicesText === 'function'
             ? this.config.noChoicesText()
             : this.config.noChoicesText;
@@ -1290,6 +1293,14 @@ class Choices implements Choices {
     }
   }
 
+  _canAddChoice(activeItems: Item[], value: string): Notice {
+    const canAddItem = this._canAddItem(activeItems, value);
+
+    canAddItem.response = this.config.addChoices && canAddItem.response;
+
+    return canAddItem;
+  }
+
   _canAddItem(activeItems: Item[], value: string): Notice {
     let canAddItem = true;
     let notice =
@@ -1617,16 +1628,22 @@ class Choices implements Choices {
     const { ENTER_KEY: enterKey } = KEY_CODES;
     const targetWasButton =
       target && (target as HTMLElement).hasAttribute('data-button');
+    let addedItem = false;
 
-    if (this._isTextElement && target && (target as HTMLInputElement).value) {
+    if (target && (target as HTMLInputElement).value) {
       const { value } = this.input;
       const canAddItem = this._canAddItem(activeItems, value);
+      const canAddChoice = this._canAddChoice(activeItems, value);
 
-      if (canAddItem.response) {
+      if (
+        (this._isTextElement && canAddItem.response) ||
+        (!this._isTextElement && canAddChoice.response)
+      ) {
         this.hideDropdown(true);
         this._addItem({ value });
         this._triggerChange(value);
         this.clearInput();
+        addedItem = true;
       }
     }
 
@@ -1641,11 +1658,15 @@ class Choices implements Choices {
       );
 
       if (highlightedChoice) {
-        // add enter keyCode value
-        if (activeItems[0]) {
-          activeItems[0].keyCode = enterKey; // eslint-disable-line no-param-reassign
+        if (addedItem) {
+          this.unhighlightAll();
+        } else {
+          if (activeItems[0]) {
+            // add enter keyCode value
+            activeItems[0].keyCode = enterKey; // eslint-disable-line no-param-reassign
+          }
+          this._handleChoiceAction(activeItems, highlightedChoice);
         }
-        this._handleChoiceAction(activeItems, highlightedChoice);
       }
 
       event.preventDefault();

diff --git a/src/scripts/defaults.ts b/src/scripts/defaults.ts
@@ -39,6 +39,7 @@ export const DEFAULT_CONFIG: Options = {
   renderChoiceLimit: -1,
   maxItemCount: -1,
   pseudoMultiSelectForSingle: false,
+  addChoices: false,
   addItems: true,
   addItemFilter: null,
   removeItems: true,

diff --git a/src/scripts/interfaces/options.ts b/src/scripts/interfaces/options.ts
@@ -113,6 +113,15 @@ export interface Options {
    */
   pseudoMultiSelectForSingle: boolean
 
+  /**
+   * Whether a user can add choices dynamically.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * @default false
+   */
+  addChoices: boolean;
+
   /**
    * Whether a user can add items.
    *