Set value of text element

assets/scripts/src/choices.js

@@ -130,7 +130,9 @@ class Choices {
 
     if (this.config.renderSelectedChoices !== 'auto' && this.config.renderSelectedChoices !== 'always') {
       if (!this.config.silent) {
-        console.warn('renderSelectedChoices: Possible values are \'auto\' and \'always\'. Falling back to \'auto\'.');
+        console.warn(
+          'renderSelectedChoices: Possible values are \'auto\' and \'always\'. Falling back to \'auto\'.'
+        );
       }
       this.config.renderSelectedChoices = 'auto';
     }
@@ -403,8 +405,10 @@ class Choices {
     if (this.isTextElement) {
       // Simplify store data to just values
       const itemsFiltered = this.store.getItemsReducedToValues(items);
-      // Assign hidden input array of values
+      const itemsFilteredString = itemsFiltered.join(this.config.delimiter);
-      this.passedElement.setAttribute('value', itemsFiltered.join(this.config.delimiter));
+      // Update the value of the hidden input
+      this.passedElement.setAttribute('value', itemsFilteredString);
+      this.passedElement.value = itemsFilteredString;
     } else {
       const selectedOptionsFragment = document.createDocumentFragment();
 
@@ -544,7 +548,9 @@ class Choices {
     const groupId = item.groupId;
     const group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
 
-    this.store.dispatch(highlightItem(id, true));
+    this.store.dispatch(
+      highlightItem(id, true)
+    );
 
     if (runEvent) {
       if (group && group.value) {
@@ -581,7 +587,9 @@ class Choices {
     const groupId = item.groupId;
     const group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
 
-    this.store.dispatch(highlightItem(id, false));
+    this.store.dispatch(
+      highlightItem(id, false)
+    );
 
     if (group && group.value) {
       triggerEvent(this.passedElement, 'unhighlightItem', {
@@ -970,7 +978,9 @@ class Choices {
    * @public
    */
   clearStore() {
-    this.store.dispatch(clearAll());
+    this.store.dispatch(
+      clearAll()
+    );
     return this;
   }
 
@@ -988,7 +998,9 @@ class Choices {
     }
     if (!this.isTextElement && this.config.searchEnabled) {
       this.isSearching = false;
-      this.store.dispatch(activateChoices(true));
+      this.store.dispatch(
+        activateChoices(true)
+      );
     }
     return this;
   }
@@ -1389,7 +1401,9 @@ class Choices {
       this.currentValue = newValue;
       this.highlightPosition = 0;
       this.isSearching = true;
-      this.store.dispatch(filterChoices(results));
+      this.store.dispatch(
+        filterChoices(results)
+      );
     }
   }
 
@@ -1423,7 +1437,9 @@ class Choices {
       } else if (hasUnactiveChoices) {
         // Otherwise reset choices to active
         this.isSearching = false;
-        this.store.dispatch(activateChoices(true));
+        this.store.dispatch(
+          activateChoices(true)
+        );
       }
     }
   }
@@ -1550,7 +1566,7 @@ class Choices {
       if (this.isTextElement && target.value) {
         const value = this.input.value;
         const canAddItem = this._canAddItem(activeItems, value);
-        
+
         // All is good, add
         if (canAddItem.response) {
           if (hasActiveDropdown) {
@@ -1710,7 +1726,9 @@ class Choices {
         // ...and it is a multiple select input, activate choices (if searching)
         if (!this.isTextElement && this.isSearching) {
           this.isSearching = false;
-          this.store.dispatch(activateChoices(true));
+          this.store.dispatch(
+            activateChoices(true)
+          );
         }
       } else if (this.canSearch && canAddItem.response) {
         this._handleSearch(this.input.value);
@@ -2135,7 +2153,17 @@ class Choices {
       passedValue += this.config.appendValue.toString();
     }
 
-    this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId, groupId, customProperties, passedKeyCode));
+    this.store.dispatch(
+      addItem(
+        passedValue,
+        passedLabel,
+        id,
+        passedOptionId,
+        groupId,
+        customProperties,
+        passedKeyCode
+      )
+    );
 
     if (this.isSelectOneElement) {
       this.removeActiveItems(id);
@@ -2180,7 +2208,9 @@ class Choices {
     const groupId = item.groupId;
     const group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
 
-    this.store.dispatch(removeItem(id, choiceId));
+    this.store.dispatch(
+      removeItem(id, choiceId)
+    );
 
     if (group && group.value) {
       triggerEvent(this.passedElement, 'removeItem', {
@@ -2222,16 +2252,18 @@ class Choices {
     const choiceId = choices ? choices.length + 1 : 1;
     const choiceElementId = `${this.baseId}-${this.idNames.itemChoice}-${choiceId}`;
 
-    this.store.dispatch(addChoice(
+    this.store.dispatch(
-      value,
+      addChoice(
-      choiceLabel,
+        value,
-      choiceId,
+        choiceLabel,
-      groupId,
+        choiceId,
-      isDisabled,
+        groupId,
-      choiceElementId,
+        isDisabled,
-      customProperties,
+        choiceElementId,
-      keyCode
+        customProperties,
-    ));
+        keyCode
+      )
+    );
 
     if (isSelected) {
       this._addItem(
@@ -2251,7 +2283,9 @@ class Choices {
    * @private
    */
   _clearChoices() {
-    this.store.dispatch(clearChoices());
+    this.store.dispatch(
+      clearChoices()
+    );
   }
 
   /**
@@ -2269,12 +2303,14 @@ class Choices {
     const isDisabled = group.disabled ? group.disabled : false;
 
     if (groupChoices) {
-      this.store.dispatch(addGroup(
+      this.store.dispatch(
-        group.label,
+        addGroup(
-        groupId,
+          group.label,
-        true,
+          groupId,
-        isDisabled
+          true,
-      ));
+          isDisabled
+        )
+      );
 
       groupChoices.forEach((option) => {
         const isOptDisabled = option.disabled ||
@@ -2293,12 +2329,14 @@ class Choices {
         );
       });
     } else {
-      this.store.dispatch(addGroup(
+      this.store.dispatch(
-        group.label,
+        addGroup(
-        group.id,
+          group.label,
-        false,
+          group.id,
-        group.disabled
+          false,
-      ));
+          group.disabled
+        )
+      );
     }
   }
 
@@ -2598,12 +2636,16 @@ class Choices {
       this.config.classNames.hiddenState
     );
 
+    // Remove element from tab index
     this.passedElement.tabIndex = '-1';
+
     // Backup original styles if any
     const origStyle = this.passedElement.getAttribute('style');
+
     if (Boolean(origStyle)) {
       this.passedElement.setAttribute('data-choice-orig-style', origStyle);
     }
+
     this.passedElement.setAttribute('style', 'display:none;');
     this.passedElement.setAttribute('aria-hidden', 'true');
     this.passedElement.setAttribute('data-choice', 'active');

index.html

@@ -516,10 +516,6 @@
 
       var boroughs = new Choices(document.getElementById('boroughs')).disable();
     });
-
-    document.getElementById('choices-single-default').addEventListener('addItem', function (e) {
-      console.log(e)
-    })
   </script>
 
   <!-- Google Analytics - Ignore me -->
@@ -532,4 +528,4 @@
   <!-- End Google Analytics -->
 </body>
 
-</html>
+</html>