Merge pull request #255 from maximmig/feature/modularise-code

Addressing issue #224

src/scripts/src/choices.js

@@ -505,6 +505,13 @@ class Choices {
 
           // If we have grouped options
         if (activeGroups.length >= 1 && this.isSearching !== true) {
+          // If we have a placeholder choice along with groups
+          const activePlaceholders = activeChoices.filter(
+            activeChoice => activeChoice.placeholder === true && activeChoice.groupId === -1,
+          );
+          if (activePlaceholders.length >= 1) {
+            choiceListFragment = this.renderChoices(activePlaceholders, choiceListFragment);
+          }
           choiceListFragment = this.renderGroups(activeGroups, activeChoices, choiceListFragment);
         } else if (activeChoices.length >= 1) {
           choiceListFragment = this.renderChoices(activeChoices, choiceListFragment);
@@ -2628,6 +2635,19 @@ class Choices {
       this.isSearching = false;
 
       if (passedGroups && passedGroups.length) {
+        // If we have a placeholder option
+        const placeholderChoice = this.passedElement.querySelector('option[placeholder]');
+        if (placeholderChoice && placeholderChoice.parentNode.tagName === 'SELECT') {
+          this._addChoice(
+            placeholderChoice.value,
+            placeholderChoice.innerHTML,
+            placeholderChoice.selected,
+            placeholderChoice.disabled,
+            undefined,
+            undefined,
+            /* placeholder */ true,
+          );
+        }
         passedGroups.forEach((group) => {
           this._addGroup(group, (group.id || null));
         });
@@ -2657,24 +2677,28 @@ class Choices {
 
         // Add each choice
         allChoices.forEach((choice, index) => {
-          // Pre-select first choice if it's a single select
+          if (this.isSelectElement) {
-          if (this.isSelectOneElement) {
+            // If the choice is actually a group
-            // If there is a selected choice already or the choice is not
+            if (choice.choices) {
-            // the first in the array, add each choice normally
+              this._addGroup(choice, choice.id || null);
-            // Otherwise pre-select the first choice in the array
+            } else {
-            const shouldPreselect = (!hasSelectedChoice || (hasSelectedChoice && index === 0));
+              // If there is a selected choice already or the choice is not
-            const isSelected = shouldPreselect ? true : choice.selected;
+              // the first in the array, add each choice normally
-            const isDisabled = shouldPreselect ? false : choice.disabled;
+              // Otherwise pre-select the first choice in the array if it's a single select
+              const shouldPreselect = this.isSelectOneElement && !hasSelectedChoice && index === 0;
+              const isSelected = shouldPreselect ? true : choice.selected;
+              const isDisabled = shouldPreselect ? false : choice.disabled;
 
-            this._addChoice(
+              this._addChoice(
-              choice.value,
+                choice.value,
-              choice.label,
+                choice.label,
-              isSelected,
+                isSelected,
-              isDisabled,
+                isDisabled,
-              undefined,
+                undefined,
-              choice.customProperties,
+                choice.customProperties,
-              choice.placeholder,
+                choice.placeholder,
-            );
+              );
+            }
           } else {
             this._addChoice(
               choice.value,