Toggling dropdown menu

assets/scripts/src/choices.js

@@ -61,6 +61,7 @@ export class Choices {
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onClick = this.onClick.bind(this);
         this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
 
         // Let's have it large
         this.init();
@@ -225,8 +226,14 @@ export class Choices {
     }
 
     onFocus(e) {
-        if(this.passedInput.type === 'select-multiple') {
-            console.log(e.target);
+        if(this.dropdown) {
+            this.toggleDropdown();
+        }
+    }
+
+    onBlur(e) {
+        if(this.dropdown) {
+            this.toggleDropdown();
         }
     }
 
@@ -394,6 +401,22 @@ export class Choices {
         };
     }
 
+    toggleDropdown() {
+        if(!this.dropdown) {
+            console.error('No dropdown set');
+            return;
+        }
+
+        const isActive = this.dropdown.classList.contains('is-active');
+
+        this.dropdown.classList[isActive ? 'remove' : 'add']('is-active');
+    }
+
+    addItemToDropdown(value) {
+        const dropdownItem = strToEl(`<li class="choices__item choices__item--selectable" data-choice-selectable data-choice-value="${value}">${value}</li>`);        
+        this.dropdown.appendChild(dropdownItem);
+    }
+    
     /* Rendering */
 
     /**
@@ -523,6 +546,12 @@ export class Choices {
             this.addItem(value);
         });
 
+        const unselectedOptions = this.passedInput.options;
+        for (var i = 0; i < unselectedOptions.length; i++) {
+            let option = unselectedOptions[i];
+            this.addItemToDropdown(option.value);
+        }
+
         // Subscribe to store
         this.store.subscribe(this.render);
 
@@ -537,12 +566,14 @@ export class Choices {
         document.addEventListener('keydown', this.onKeyDown);
         this.list.addEventListener('click', this.onClick);
         this.input.addEventListener('focus', this.onFocus);
+        this.input.addEventListener('blur', this.onBlur);
     }
 
     removeEventListeners() {
         document.removeEventListener('keydown', this.onKeyDown);
         this.list.removeEventListener('click', this.onClick);
         this.input.removeEventListener('focus', this.onFocus);
+        this.input.removeEventListener('blur', this.onBlur);
     }
 
     /**

assets/styles/scss/choices.scss

@@ -108,7 +108,7 @@ h1, h2, h3, h4, h5, h6 {
             background-color: mix(#000000, #FFFFFF, 2.5%);
         }
     }
-    .is-active { display: block; }
+    &.is-active { display: block; }
 }
 
 .choices__input {

index.html

@@ -36,7 +36,7 @@
                 <option value="Dropdown item 3">Dropdown item 3</option>
             </select>
 
-            
+<!--             
             <div class="choices choices--active">
                 <div class="choices__inner">
                     <input id="1" type="text" data-choice="" value="preset-1 preset-2" class="choices__input choices__input--hidden" tabindex="-1" style="display:none;" aria-hidden="true">
@@ -51,7 +51,7 @@
                     <li class="choices__item choices__item--selectable" data-choice-selectable data-choice-value="Dropdown item 2">Dropdown item 2</li>
                     <li class="choices__item choices__item--selectable" data-choice-selectable data-choice-value="Dropdown item 3">Dropdown item 3</li>
                 </ul>
-            </div>
+            </div> -->
 
         </div>
     </div>