Begun improving placeholders on single selects

assets/scripts/src/choices.js

@@ -54,6 +54,7 @@ class Choices {
       removeItemButton: false,
       editItems: false,
       duplicateItems: true,
+      preselectItem: true,
       delimiter: ',',
       paste: true,
       search: true,
@@ -385,8 +386,7 @@ class Choices {
       // Choices
       if (this.currentState.choices !== this.prevState.choices ||
         this.currentState.groups !== this.prevState.groups) {
-        if (this.passedElement.type === 'select-multiple' ||
-            this.passedElement.type === 'select-one') {
+        if (this.isSelectElement) {
           // Get active groups/choices
           const activeGroups = this.store.getGroupsFilteredByActive();
           const activeChoices = this.store.getChoicesFilteredByActive();
@@ -422,20 +422,29 @@ class Choices {
 
       // Items
       if (this.currentState.items !== this.prevState.items) {
+        // Get active items (items that can be selected)
         const activeItems = this.store.getItemsFilteredByActive();
-        if (activeItems) {
+
+        // Clear list
+        this.itemList.innerHTML = '';
+
+        if (activeItems.length) {
           // Create a fragment to store our list items
           // (so we don't have to update the DOM for each item)
           const itemListFragment = this.renderItems(activeItems);
 
-          // Clear list
-          this.itemList.innerHTML = '';
-
           // If we have items to add
           if (itemListFragment.childNodes) {
             // Update list
             this.itemList.appendChild(itemListFragment);
           }
+        } else if (this.passedElement.type === 'select-one') {
+          const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
+            false;
+          if (placeholder) {
+            const placeholderItem = this._getTemplate('placeholder', placeholder);
+            this.itemList.appendChild(placeholderItem);
+          }
         }
       }
 
@@ -739,7 +748,7 @@ class Choices {
    * @public
    */
   setValueByChoice(value) {
-    if (this.passedElement.type !== 'text') {
+    if (this.isSelectElement) {
       const choices = this.store.getChoices();
       // If only one value has been passed, convert to array
       const choiceValue = isType('Array', value) ? value : [value];
@@ -925,15 +934,6 @@ class Choices {
       // Remove item associated with button
       this._removeItem(itemToRemove);
       this._triggerChange(itemToRemove.value);
-
-      if (this.passedElement.type === 'select-one') {
-        const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
-          false;
-        if (placeholder) {
-          const placeholderItem = this._getTemplate('placeholder', placeholder);
-          this.itemList.appendChild(placeholderItem);
-        }
-      }
     }
   }
 
@@ -1938,7 +1938,7 @@ class Choices {
    * @private
    */
   _addChoice(isSelected, isDisabled, value, label, groupId = -1) {
-    if (!value) return;
+    if (typeof value === 'undefined' || value === null) return;
 
     // Generate unique id
     const choices = this.store.getChoices();
@@ -2138,19 +2138,24 @@ class Choices {
 
     // If placeholder has been enabled and we have a value
     if (placeholder) {
-      input.placeholder = placeholder;
       if (this.passedElement.type !== 'select-one') {
+        input.placeholder = placeholder;
         input.style.width = getWidthOfInput(input);
+      } else {
+        const placeholderItem = this._getTemplate('placeholder', placeholder);
+        this.itemList.appendChild(placeholderItem);
       }
     }
 
-    if (!this.config.addItems) this.disable();
+    if (!this.config.addItems) {
+      this.disable();
+    }
 
     containerOuter.appendChild(containerInner);
     containerOuter.appendChild(dropdown);
     containerInner.appendChild(itemList);
 
-    if (this.passedElement.type !== 'text') {
+    if (this.isSelectElement) {
       dropdown.appendChild(choiceList);
     }
 
@@ -2160,7 +2165,7 @@ class Choices {
       dropdown.insertBefore(input, dropdown.firstChild);
     }
 
-    if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
+    if (this.isSelectElement) {
       const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
 
       this.highlightPosition = 0;
@@ -2201,7 +2206,7 @@ class Choices {
           const isSelected = choice.selected ? choice.selected : false;
           // Pre-select first choice if it's a single select
           if (this.passedElement.type === 'select-one') {
-            if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
+            if (this.config.preselectItem === false || hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
               // If there is a selected choice already or the choice is not
               // the first in the array, add each choice normally
               this._addChoice(isSelected, isDisabled, choice.value, choice.label);

index.html

@@ -239,8 +239,8 @@
       </select>
 
       <p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
-      <label for="states">States</label>
-      <select class="form-control" name="states" id="states" placeholder="Choose a state">
+      <label for="choices-states">States</label>
+      <select class="form-control" name="choices-states" id="choices-states" placeholder="Choose a state">
         <option value="Michigan">Michigan</option>
         <option value="Texas">Texas</option>
         <option value="Chicago">Chicago</option>
@@ -248,14 +248,22 @@
         <option value="Washington">Washington</option>
       </select>
 
-      <label for="boroughs">Boroughs</label>
-      <select class="form-control" name="boroughs" id="boroughs" placeholder="Choose a borough">
+      <label for="choices-boroughs">Boroughs</label>
+      <select class="form-control" name="choices-boroughs" id="choices-boroughs" placeholder="Choose a borough">
         <option value="The Bronx">The Bronx</option>
         <option value="Brooklyn">Brooklyn</option>
         <option value="Manhattan">Manhattan</option>
         <option value="Queens">Queens</option>
         <option value="Staten Island">Staten Island</option>
       </select>
+
+      <label for="choices-placeholder-option">Placeholder option</label>
+      <select class="form-control" name="choices-placeholder-option" id="choices-placeholder-option">
+        <option selected>Press here</option>
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="three">Three</option>
+      </select>
     </div>
   </div>
   <script>
@@ -434,17 +442,20 @@
         shouldSort: false,
       });
 
-      var states = new Choices(document.getElementById('states'), {
+      var singleStates = new Choices(document.getElementById('choices-states'), {
         callbackOnChange: function(value) {
           if(value === 'New York') {
-            boroughs.enable();
+            singleBoroughs.enable();
           } else {
-            boroughs.disable();
+            singleBoroughs.disable();
           }
         }
       });
 
-      var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
+      var singleBoroughs = new Choices(document.getElementById('choices-boroughs')).disable();
+
+      var singleCustomTemplates = new Choices(
+        document.getElementById('choices-custom-templates'), {
         callbackOnCreateTemplates: function (strToEl) {
           var classNames = this.config.classNames;
           return {
@@ -453,20 +464,26 @@
                 <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
                   <span style="margin-right:10px;">🎉</span> ${data.label}
                 </div>
-                `);
+              `);
             },
             choice: (data) => {
               return strToEl(`
                 <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
                     <span style="margin-right:10px;">👉🏽</span> ${data.label}
                   </div>
-                `);
+              `);
             },
           };
         }
       });
 
-      var boroughs = new Choices(document.getElementById('boroughs')).disable();
+      var singlePlaceholderOption = new Choices('#choices-placeholder-option', {
+        placeholder: true,
+        placeholderValue: 'Please Choose…',
+        removeItemButton: true,
+        preselectItem: false,
+      });
+
     });
   </script>
 

tests/spec/choices_spec.js

@@ -431,6 +431,7 @@ describe('Choices', () => {
 
       this.choices = new Choices(this.input, {
         placeholderValue: 'Placeholder text',
+        preselectItem: true,
         choices: [{
           value: 'One',
           label: 'Label One',