From 565d659c0ade7e93343238acbca6f9f92875bf65 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Thu, 3 Aug 2017 10:56:49 +0100
Subject: [PATCH] Fix search + use choice placeholder on remove button

---
 assets/scripts/src/choices.js |  55 +++--
 index.html                    | 453 +++++++++++++++++-----------------
 2 files changed, 264 insertions(+), 244 deletions(-)

diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
index 20249eb..5b69f4c 100644
--- a/assets/scripts/src/choices.js
+++ b/assets/scripts/src/choices.js
@@ -174,13 +174,12 @@ class Choices {
 
     this.highlightPosition = 0;
     this.canSearch = this.config.searchEnabled;
-    this.placeholder = this.config.placeholder ?
-      (this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) :
-      false;
 
     this.placeholder = false;
     if (!this.isSelectOneElement) {
-      this.placeholder = (this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) || false;
+      this.placeholder = this.config.placeholder ?
+      (this.config.placeholderValue || this.passedElement.getAttribute('placeholder')) :
+      false;
     }
 
     // Assign preset choices from passed object
@@ -406,14 +405,16 @@ class Choices {
     const sortedChoices = [...placeholderChoices, ...normalChoices];
 
     if (this.isSearching) {
-      choiceLimit = Math.min(searchResultLimit, sortedChoices.length - 1);
+      choiceLimit = searchResultLimit;
     } else if (renderChoiceLimit > 0 && !withinGroup) {
-      choiceLimit = Math.min(renderChoiceLimit, sortedChoices.length - 1);
+      choiceLimit = renderChoiceLimit;
     }
 
     // Add each choice to dropdown within range
     for (let i = 0; i < choiceLimit; i++) {
-      appendChoice(sortedChoices[i]);
+      if (sortedChoices[i]) {
+        appendChoice(sortedChoices[i]);
+      }
     };
 
     return choicesFragment;
@@ -1148,13 +1149,31 @@ class Choices {
       this._removeItem(itemToRemove);
       this._triggerChange(itemToRemove.value);
 
-      if (this.isSelectOneElement && this.placeholder) {
-        const placeholderItem = this._getTemplate('placeholder', this.placeholder);
-        this.itemList.appendChild(placeholderItem);
+      if (this.isSelectOneElement) {
+        this._selectPlaceholderChoice();
       }
     }
   }
 
+  /**
+   * Select placeholder choice
+   */
+  _selectPlaceholderChoice() {
+    const placeholderChoice = this.store.getPlaceholderChoice();
+
+    if (placeholderChoice) {
+      this._addItem(
+        placeholderChoice.value,
+        placeholderChoice.label,
+        placeholderChoice.id,
+        placeholderChoice.groupId,
+        null,
+        placeholderChoice.placeholder
+      );
+      this._triggerChange(placeholderChoice.value);
+    }
+  }
+
   /**
    * Process click of an item
    * @param {Array} activeItems The currently active items
@@ -1402,20 +1421,8 @@ class Choices {
             );
           }
 
-          if (this.passedElement.type === 'select-one') {
-            const placeholderChoice = this.store.getPlaceholderChoice();
-
-            if (placeholderChoice) {
-              this._addItem(
-                placeholderChoice.value,
-                placeholderChoice.label,
-                placeholderChoice.id,
-                placeholderChoice.groupId,
-                null,
-                placeholderChoice.placeholder
-              );
-              this._triggerChange(placeholderChoice.value);
-            }
+          if (this.isSelectOneElement) {
+            this._selectPlaceholderChoice();
           }
         });
       } else {
diff --git a/index.html b/index.html
index 8e3edd5..1c3be52 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@
         </p>
       <hr>
 
-      <h2>Text inputs</h2>
+<!--       <h2>Text inputs</h2>
       <label for="choices-text-remove-button">Limited to 5 values with remove button</label>
       <input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something">
 
@@ -272,254 +272,267 @@
         <option value="Manhattan">Manhattan</option>
         <option value="Queens">Queens</option>
         <option value="Staten Island">Staten Island</option>
+      </select> -->
+
+      <select class="form-control" name="test" id="test" placeholder="Choose a borough">
+        <option selected placeholder>Placeholder</option>
+        <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>
     </div>
   </div>
   <script>
     document.addEventListener('DOMContentLoaded', function () {
-      var textRemove = new Choices(document.getElementById('choices-text-remove-button'), {
-        delimiter: ',',
-        editItems: true,
-        maxItemCount: 5,
-        removeItemButton: true,
+      var test = new Choices('.form-control', {
+        removeItemButton: true
       });
 
-      var textUniqueVals = new Choices('#choices-text-unique-values', {
-        paste: false,
-        duplicateItems: false,
-        editItems: true,
-      });
+      // var textRemove = new Choices(document.getElementById('choices-text-remove-button'), {
+      //   delimiter: ',',
+      //   editItems: true,
+      //   maxItemCount: 5,
+      //   removeItemButton: true,
+      // });
 
-      var texti18n = new Choices('#choices-text-i18n', {
-        paste: false,
-        duplicateItems: false,
-        editItems: true,
-        maxItemCount: 5,
-        addItemText: function (value) {
-          return 'Appuyez sur Entrée pour ajouter <b>"' + String(value) + '"</b>';
-        },
-        maxItemText: function (maxItemCount) {
-          return String(maxItemCount) + 'valeurs peuvent être ajoutées';
-        },
-        uniqueItemText: 'Cette valeur est déjà présente',
-      });
+      // var textUniqueVals = new Choices('#choices-text-unique-values', {
+      //   paste: false,
+      //   duplicateItems: false,
+      //   editItems: true,
+      // });
 
-      var textEmailFilter = new Choices('#choices-text-email-filter', {
-        editItems: true,
-        regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-      }).setValue(['joe@bloggs.com']);
+      // var texti18n = new Choices('#choices-text-i18n', {
+      //   paste: false,
+      //   duplicateItems: false,
+      //   editItems: true,
+      //   maxItemCount: 5,
+      //   addItemText: function (value) {
+      //     return 'Appuyez sur Entrée pour ajouter <b>"' + String(value) + '"</b>';
+      //   },
+      //   maxItemText: function (maxItemCount) {
+      //     return String(maxItemCount) + 'valeurs peuvent être ajoutées';
+      //   },
+      //   uniqueItemText: 'Cette valeur est déjà présente',
+      // });
 
-      var textDisabled = new Choices('#choices-text-disabled', {
-        addItems: false,
-        removeItems: false,
-      }).disable();
+      // var textEmailFilter = new Choices('#choices-text-email-filter', {
+      //   editItems: true,
+      //   regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      // }).setValue(['joe@bloggs.com']);
 
-      var textPrependAppendVal = new Choices('#choices-text-prepend-append-value', {
-        prependValue: 'item-',
-        appendValue: '-' + Date.now(),
-      }).removeActiveItems();
+      // var textDisabled = new Choices('#choices-text-disabled', {
+      //   addItems: false,
+      //   removeItems: false,
+      // }).disable();
 
-      var textPresetVal = new Choices('#choices-text-preset-values', {
-        items: ['Josh Johnson', {
-          value: 'joe@bloggs.co.uk',
-          label: 'Joe Bloggs',
-          customProperties: {
-            description: 'Joe Blogg is such a generic name'
-          }
-        }],
-      });
+      // var textPrependAppendVal = new Choices('#choices-text-prepend-append-value', {
+      //   prependValue: 'item-',
+      //   appendValue: '-' + Date.now(),
+      // }).removeActiveItems();
 
-      var multipleDefault = new Choices(document.getElementById('choices-multiple-groups'));
+      // var textPresetVal = new Choices('#choices-text-preset-values', {
+      //   items: ['Josh Johnson', {
+      //     value: 'joe@bloggs.co.uk',
+      //     label: 'Joe Bloggs',
+      //     customProperties: {
+      //       description: 'Joe Blogg is such a generic name'
+      //     }
+      //   }],
+      // });
 
-      var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
-        placeholder: true,
-        placeholderValue: 'Pick an Strokes record',
-        maxItemCount: 5,
-      }).ajax(function (callback) {
-        fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
-          .then(function (response) {
-            response.json().then(function (data) {
-              callback(data.releases, 'title', 'title');
-            });
-          })
-          .catch(function (error) {
-            console.error(error);
-          });
-      });
+      // var multipleDefault = new Choices(document.getElementById('choices-multiple-groups'));
 
-      var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
-        removeItemButton: true,
-      });
+      // var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
+      //   placeholder: true,
+      //   placeholderValue: 'Pick an Strokes record',
+      //   maxItemCount: 5,
+      // }).ajax(function (callback) {
+      //   fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
+      //     .then(function (response) {
+      //       response.json().then(function (data) {
+      //         callback(data.releases, 'title', 'title');
+      //       });
+      //     })
+      //     .catch(function (error) {
+      //       console.error(error);
+      //     });
+      // });
 
-      /* Use label on event */
-      var choicesSelect = new Choices('#choices-multiple-labels', {
-        removeItemButton: true,
-        choices: [
-          { value: 'One', label: 'Label One' },
-          { value: 'Two', label: 'Label Two', disabled: true },
-          { value: 'Three', label: 'Label Three' },
-        ],
-      }).setChoices([
-        { value: 'Four', label: 'Label Four', disabled: true },
-        { value: 'Five', label: 'Label Five' },
-        { value: 'Six', label: 'Label Six', selected: true },
-      ], 'value', 'label', false);
+      // var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
+      //   removeItemButton: true,
+      // });
 
-      choicesSelect.passedElement.addEventListener('addItem', function (event) {
-        document.getElementById('message').innerHTML = 'You just added "' + event.detail.label + '"';
-      });
+      // /* Use label on event */
+      // var choicesSelect = new Choices('#choices-multiple-labels', {
+      //   removeItemButton: true,
+      //   choices: [
+      //     { value: 'One', label: 'Label One' },
+      //     { value: 'Two', label: 'Label Two', disabled: true },
+      //     { value: 'Three', label: 'Label Three' },
+      //   ],
+      // }).setChoices([
+      //   { value: 'Four', label: 'Label Four', disabled: true },
+      //   { value: 'Five', label: 'Label Five' },
+      //   { value: 'Six', label: 'Label Six', selected: true },
+      // ], 'value', 'label', false);
 
-      choicesSelect.passedElement.addEventListener('removeItem', function (event) {
-        document.getElementById('message').innerHTML = 'You just removed "' + event.detail.label + '"';
-      });
+      // choicesSelect.passedElement.addEventListener('addItem', function (event) {
+      //   document.getElementById('message').innerHTML = 'You just added "' + event.detail.label + '"';
+      // });
 
-      var singleFetch = new Choices('#choices-single-remote-fetch', {
-        placeholder: true,
-        placeholderValue: 'Pick an Arctic Monkeys record',
-        searchPlaceholderValue: 'Search for an Arctic Monkeys record',
-      }).ajax(function (callback) {
-        fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
-          .then(function (response) {
-            response.json().then(function (data) {
-              callback(data.releases, 'title', 'title');
-              singleFetch.setValueByChoice('Fake Tales Of San Francisco');
-            });
-          })
-          .catch(function (error) {
-            console.error(error);
-          });
-      });
+      // choicesSelect.passedElement.addEventListener('removeItem', function (event) {
+      //   document.getElementById('message').innerHTML = 'You just removed "' + event.detail.label + '"';
+      // });
 
-      var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
-        removeItemButton: true,
-      }).ajax(function (callback) {
-        var request = new XMLHttpRequest();
-        request.open('get', 'https://api.discogs.com/artists/83080/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW', true);
-        request.onreadystatechange = function () {
-          var status;
-          var data;
-          if (request.readyState === 4) {
-            status = request.status;
-            if (status === 200) {
-              data = JSON.parse(request.responseText);
-              callback(data.releases, 'title', 'title');
-              singleXhrRemove.setValueByChoice('How Soon Is Now?');
-            } else {
-              console.error(status);
-            }
-          }
-        }
-        request.send();
-      });
+      // var singleFetch = new Choices('#choices-single-remote-fetch', {
+      //   placeholder: true,
+      //   placeholderValue: 'Pick an Arctic Monkeys record',
+      //   searchPlaceholderValue: 'Search for an Arctic Monkeys record',
+      // }).ajax(function (callback) {
+      //   fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
+      //     .then(function (response) {
+      //       response.json().then(function (data) {
+      //         callback(data.releases, 'title', 'title');
+      //         singleFetch.setValueByChoice('Fake Tales Of San Francisco');
+      //       });
+      //     })
+      //     .catch(function (error) {
+      //       console.error(error);
+      //     });
+      // });
 
-      var genericExamples = new Choices('[data-trigger]', {
-        placeholderValue: 'This is a placeholder set in the config',
-        searchPlaceholderValue: 'This is a search placeholder'
-      });
+      // var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
+      //   removeItemButton: true,
+      // }).ajax(function (callback) {
+      //   var request = new XMLHttpRequest();
+      //   request.open('get', 'https://api.discogs.com/artists/83080/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW', true);
+      //   request.onreadystatechange = function () {
+      //     var status;
+      //     var data;
+      //     if (request.readyState === 4) {
+      //       status = request.status;
+      //       if (status === 200) {
+      //         data = JSON.parse(request.responseText);
+      //         callback(data.releases, 'title', 'title');
+      //         singleXhrRemove.setValueByChoice('How Soon Is Now?');
+      //       } else {
+      //         console.error(status);
+      //       }
+      //     }
+      //   }
+      //   request.send();
+      // });
 
-      var singleNoSearch = new Choices('#choices-single-no-search', {
-        searchEnabled: false,
-        removeItemButton: true,
-        choices: [
-          { value: 'One', label: 'Label One' },
-          { value: 'Two', label: 'Label Two', disabled: true },
-          { value: 'Three', label: 'Label Three' },
-        ],
-      }).setChoices([
-        { value: 'Four', label: 'Label Four', disabled: true },
-        { value: 'Five', label: 'Label Five' },
-        { value: 'Six', label: 'Label Six', selected: true },
-      ], 'value', 'label', false);
+      // var genericExamples = new Choices('[data-trigger]', {
+      //   placeholderValue: 'This is a placeholder set in the config',
+      //   searchPlaceholderValue: 'This is a search placeholder'
+      // });
 
-      var singlePresetOpts = new Choices('#choices-single-preset-options', {
-        placeholder: true,
-      }).setChoices([{
-        label: 'Group one',
-        id: 1,
-        disabled: false,
-        choices: [
-          { value: 'Child One', label: 'Child One', selected: true },
-          { value: 'Child Two', label: 'Child Two', disabled: true },
-          { value: 'Child Three', label: 'Child Three' },
-        ]
-      },
-      {
-        label: 'Group two',
-        id: 2,
-        disabled: false,
-        choices: [
-          { value: 'Child Four', label: 'Child Four', disabled: true },
-          { value: 'Child Five', label: 'Child Five' },
-          { value: 'Child Six', label: 'Child Six' },
-        ]
-      }], 'value', 'label');
+      // var singleNoSearch = new Choices('#choices-single-no-search', {
+      //   searchEnabled: false,
+      //   removeItemButton: true,
+      //   choices: [
+      //     { value: 'One', label: 'Label One' },
+      //     { value: 'Two', label: 'Label Two', disabled: true },
+      //     { value: 'Three', label: 'Label Three' },
+      //   ],
+      // }).setChoices([
+      //   { value: 'Four', label: 'Label Four', disabled: true },
+      //   { value: 'Five', label: 'Label Five' },
+      //   { value: 'Six', label: 'Label Six', selected: true },
+      // ], 'value', 'label', false);
 
-      var singleSelectedOpt = new Choices('#choices-single-selected-option', {
-        searchFields: ['label', 'value', 'customProperties.description'],
-        choices: [
-          { value: 'One', label: 'Label One', selected: true },
-          { value: 'Two', label: 'Label Two', disabled: true },
-          {
-            value: 'Three', label: 'Label Three', customProperties: {
-              description: 'This option is fantastic'
-            }
-          },
-        ],
-      }).setValueByChoice('Two');
+      // var singlePresetOpts = new Choices('#choices-single-preset-options', {
+      //   placeholder: true,
+      // }).setChoices([{
+      //   label: 'Group one',
+      //   id: 1,
+      //   disabled: false,
+      //   choices: [
+      //     { value: 'Child One', label: 'Child One', selected: true },
+      //     { value: 'Child Two', label: 'Child Two', disabled: true },
+      //     { value: 'Child Three', label: 'Child Three' },
+      //   ]
+      // },
+      // {
+      //   label: 'Group two',
+      //   id: 2,
+      //   disabled: false,
+      //   choices: [
+      //     { value: 'Child Four', label: 'Child Four', disabled: true },
+      //     { value: 'Child Five', label: 'Child Five' },
+      //     { value: 'Child Six', label: 'Child Six' },
+      //   ]
+      // }], 'value', 'label');
 
-      var singleNoSorting = new Choices('#choices-single-no-sorting', {
-        shouldSort: false,
-      });
+      // var singleSelectedOpt = new Choices('#choices-single-selected-option', {
+      //   searchFields: ['label', 'value', 'customProperties.description'],
+      //   choices: [
+      //     { value: 'One', label: 'Label One', selected: true },
+      //     { value: 'Two', label: 'Label Two', disabled: true },
+      //     {
+      //       value: 'Three', label: 'Label Three', customProperties: {
+      //         description: 'This option is fantastic'
+      //       }
+      //     },
+      //   ],
+      // }).setValueByChoice('Two');
 
-      var states = new Choices(document.getElementById('states'));
+      // var singleNoSorting = new Choices('#choices-single-no-sorting', {
+      //   shouldSort: false,
+      // });
 
-      states.passedElement.addEventListener('change', function (e) {
-        if (e.detail.value === 'New York') {
-          boroughs.enable();
-        } else {
-          boroughs.disable();
-        }
-      });
+      // var states = new Choices(document.getElementById('states'));
 
-      var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
-        callbackOnCreateTemplates: function (strToEl) {
-          var classNames = this.config.classNames;
-          var itemSelectText = this.config.itemSelectText;
-          return {
-            item: function (data) {
-              return strToEl('\
-                <div\
-                  class="'+ String(classNames.item) + ' ' + String(data.highlighted ? classNames.highlightedState : classNames.itemSelectable) + '"\
-                  data-item\
-                  data-id="'+ String(data.id) + '"\
-                  data-value="'+ String(data.value) + '"\
-                  '+ String(data.active ? 'aria-selected="true"' : '') + '\
-                  '+ String(data.disabled ? 'aria-disabled="true"' : '') + '\
-                  >\
-                  <span style="margin-right:10px;">🎉</span> ' + String(data.label) + '\
-                </div>\
-              ');
-            },
-            choice: function (data) {
-              return strToEl('\
-                <div\
-                  class="'+ String(classNames.item) + ' ' + String(classNames.itemChoice) + ' ' + String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable) + '"\
-                  data-select-text="'+ String(itemSelectText) + '"\
-                  data-choice \
-                  '+ String(data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable') + '\
-                  data-id="'+ String(data.id) + '"\
-                  data-value="'+ String(data.value) + '"\
-                  '+ String(data.groupId > 0 ? 'role="treeitem"' : 'role="option"') + '\
-                  >\
-                  <span style="margin-right:10px;">👉🏽</span> ' + String(data.label) + '\
-                </div>\
-              ');
-            },
-          };
-        }
-      });
+      // states.passedElement.addEventListener('change', function (e) {
+      //   if (e.detail.value === 'New York') {
+      //     boroughs.enable();
+      //   } else {
+      //     boroughs.disable();
+      //   }
+      // });
 
-      var boroughs = new Choices(document.getElementById('boroughs')).disable();
+      // var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
+      //   callbackOnCreateTemplates: function (strToEl) {
+      //     var classNames = this.config.classNames;
+      //     var itemSelectText = this.config.itemSelectText;
+      //     return {
+      //       item: function (data) {
+      //         return strToEl('\
+      //           <div\
+      //             class="'+ String(classNames.item) + ' ' + String(data.highlighted ? classNames.highlightedState : classNames.itemSelectable) + '"\
+      //             data-item\
+      //             data-id="'+ String(data.id) + '"\
+      //             data-value="'+ String(data.value) + '"\
+      //             '+ String(data.active ? 'aria-selected="true"' : '') + '\
+      //             '+ String(data.disabled ? 'aria-disabled="true"' : '') + '\
+      //             >\
+      //             <span style="margin-right:10px;">🎉</span> ' + String(data.label) + '\
+      //           </div>\
+      //         ');
+      //       },
+      //       choice: function (data) {
+      //         return strToEl('\
+      //           <div\
+      //             class="'+ String(classNames.item) + ' ' + String(classNames.itemChoice) + ' ' + String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable) + '"\
+      //             data-select-text="'+ String(itemSelectText) + '"\
+      //             data-choice \
+      //             '+ String(data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable') + '\
+      //             data-id="'+ String(data.id) + '"\
+      //             data-value="'+ String(data.value) + '"\
+      //             '+ String(data.groupId > 0 ? 'role="treeitem"' : 'role="option"') + '\
+      //             >\
+      //             <span style="margin-right:10px;">👉🏽</span> ' + String(data.label) + '\
+      //           </div>\
+      //         ');
+      //       },
+      //     };
+      //   }
+      // });
+
+      // var boroughs = new Choices(document.getElementById('boroughs')).disable();
     });
   </script>