Sprucing up the demo page + scroll to top of option list on search

assets/scripts/src/choices.js

@@ -814,7 +814,7 @@ export class Choices {
                             this.store.dispatch(filterChoices(results));
                         }
                     };
-
+    
                     handleFilter();
                 } else if(hasUnactiveChoices) {
                     // Otherwise reset choices to active
@@ -973,7 +973,7 @@ export class Choices {
         } else if(this.passedElement.type === 'select-one' && e.target === this.containerOuter && !hasActiveDropdown) {            
             this.containerOuter.classList.add(this.config.classNames.focusState);
             this.showDropdown();
-            if(this.config.search) {
+            if(this.canSearch) {
                 this.input.focus();
             }
         }
@@ -1394,6 +1394,7 @@ export class Choices {
                     });
                 });
 
+                // Join choices with preset choices and add them
                 allChoices
                     .concat(this.presetChoices)
                     .forEach((o, index) => {
@@ -1428,26 +1429,25 @@ export class Choices {
     renderGroups(groups, choices, fragment) {
         const groupFragment = fragment || document.createDocumentFragment();
 
-        groups
+        groups.forEach((group, i) => {
-            .forEach((group, i) => {
+            // Grab options that are children of this group
-                // Grab options that are children of this group
+            const groupChoices = choices.filter((choice) => {
-                const groupChoices = choices.filter((choice) => {
+                if(this.passedElement.type === 'select-one') {
-                    if(this.passedElement.type === 'select-one') {
+                    return choice.groupId === group.id    
-                        return choice.groupId === group.id    
+                } else {
-                    } else {
+                    return choice.groupId === group.id && !choice.selected;
-                        return choice.groupId === group.id && !choice.selected;
-                    }
-                });
-
-                if(groupChoices.length >= 1) {
-                    const dropdownGroup = this._getTemplate('choiceGroup', group);
-
-                    groupFragment.appendChild(dropdownGroup);
-
-                    this.renderChoices(groupChoices, groupFragment);
                 }
             });
 
+            if(groupChoices.length >= 1) {
+                const dropdownGroup = this._getTemplate('choiceGroup', group);
+
+                groupFragment.appendChild(dropdownGroup);
+
+                this.renderChoices(groupChoices, groupFragment);
+            }
+        });
+
         return groupFragment;
     }
 
@@ -1462,16 +1462,15 @@ export class Choices {
         // Create a fragment to store our list items (so we don't have to update the DOM for each item)
         const choicesFragment = fragment || document.createDocumentFragment();
 
-        choices
+        choices.forEach((choice, i) => {
-            .forEach((choice, i) => {
+            const dropdownItem = this._getTemplate('choice', choice);
-                const dropdownItem = this._getTemplate('choice', choice);
 
-                if(this.passedElement.type === 'select-one') {
+            if(this.passedElement.type === 'select-one') {
-                    choicesFragment.appendChild(dropdownItem);    
+                choicesFragment.appendChild(dropdownItem);    
-                } else if(!choice.selected) {
+            } else if(!choice.selected) {
-                    choicesFragment.appendChild(dropdownItem);   
+                choicesFragment.appendChild(dropdownItem);   
-                }
+            }
-            });
+        });
 
         return choicesFragment;
     }
@@ -1543,6 +1542,8 @@ export class Choices {
 
                     // Clear choices
                     this.choiceList.innerHTML = '';
+                    // Scroll back to top of choices list
+                    this.choiceList.scrollTop = 0;
 
                     // If we have grouped options
                     if(activeGroups.length >= 1 && this.isSearching !== true) {

assets/styles/css/base.css

@@ -1,6 +1,10 @@
 /*=============================================
 =            Generic styling                  =
 =============================================*/
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
 *, *:before, *:after {
   box-sizing: border-box; }
 
@@ -8,16 +12,20 @@ html {
   font-size: 62.5%; }
 
 html, body {
+  position: relative;
   margin: 0;
-  height: 100%;
+  width: 100%; }
-  widows: 100%; }
 
 body {
-  background-color: #333333;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 1.6rem;
   line-height: 1.4;
-  color: #FFFFFF; }
+  color: #FFFFFF;
+  background-color: #333;
+  background: -webkit-linear-gradient(right top, #333, #262626);
+  background: linear-gradient(to left bottom, #333, #262626);
+  height: 100%;
+  overflow-x: hidden; }
 
 label {
   display: block;
@@ -39,9 +47,9 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 1.2; }
 
 a, a:visited, a:focus {
-  color: #00bcd4;
+  color: #FFFFFF;
   text-decoration: none;
-  font-weight: bolder; }
+  font-weight: 600; }
 
 h1, .h1 {
   font-size: 3.2rem; }
@@ -64,12 +72,17 @@ h6, .h6 {
 .container {
   display: block;
   margin: auto;
-  max-width: 35em;
+  max-width: 40em;
-  padding: 2.4rem; }
+  padding: 4.8rem; }
+  @media (max-width: 620px) {
+    .container {
+      padding: 0; } }
 
 .section {
   background-color: #FFFFFF;
   padding: 2.4rem;
   color: #333; }
+  .section a, .section a:visited, .section a:focus {
+    color: #00bcd4; }
 
 /*=====  End of Section comment block  ======*/

assets/styles/css/base.min.css

@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#00bcd4;text-decoration:none;font-weight:bolder}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}
+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff;background-color:#333;background:-webkit-linear-gradient(right top,#333,#262626);background:linear-gradient(to left bottom,#333,#262626);height:100%;overflow-x:hidden}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:40em;padding:4.8rem}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:2.4rem;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}

assets/styles/scss/base.scss

@@ -10,26 +10,33 @@ $global-font-size-h6:    1.4rem;
 =            Generic styling                  =
 =============================================*/
 
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+
 *, *:before, *:after {
     box-sizing: border-box
 }
 
-html {
+html { font-size: 62.5%; }
-    font-size: 62.5%;
-}
 
 html, body {
+    position: relative;
     margin: 0;
-    height: 100%;
+    width: 100%;
-    widows: 100%;
 }
 
 body {
-    background-color: #333333;
     font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-size: 1.6rem;
     line-height: 1.4;
     color: #FFFFFF;
+    background-color: #333;
+    background: linear-gradient(to left bottom,#333,#262626);
+    height: 100%;
+    overflow-x: hidden;
 }
 
 label {
@@ -55,9 +62,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a, a:visited, a:focus { 
-    color: #00bcd4; 
+    color: #FFFFFF; 
     text-decoration: none;
-    font-weight: bolder;
+    font-weight: 600;
 }
 
 h1, .h1 { font-size: $global-font-size-h1; }
@@ -70,14 +77,16 @@ h6, .h6 { font-size: $global-font-size-h6; }
 .container {
     display: block;
     margin: auto;
-    max-width: 35em;
+    max-width: 40em;
-    padding: $global-guttering;
+    padding: $global-guttering*2;
+    @media (max-width: 620px) { padding: 0; }
 }
 
 .section {
     background-color: #FFFFFF;
     padding: $global-guttering;
     color: #333;
+    a, a:visited, a:focus { color: #00bcd4; }
 }
 
 /*=====  End of Section comment block  ======*/

index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Choices</title>
-    
+    <meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
+
     <!-- Ignore these -->
     <link rel="stylesheet" href="assets/styles/css/base.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
@@ -16,9 +17,10 @@
 <body>
     <div class="container">
         <div class="section">
-            <h1>Choices</h1>
+            <h1>Choices.js</h1>
             <p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
             <p>For all config options, visit the <a href="https://github.com/jshjohnson/Choices">GitHub repo</a>.</p>
+            <hr>
             <h2>Text inputs</h2>
             <label for="choices-1">Limited to 5 values</label>
             <input id="choices-1" type="text" value="preset-1,preset-2" placeholder="Enter something">
@@ -187,7 +189,7 @@
                 items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
             });
 
-            var choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
+            var choices7 = new Choices('#choices-7', { search: false });
              
             var choices10 = new Choices('#choices-10', { 
                 placeholder: true, 
@@ -250,9 +252,7 @@
                     {value: 'Two', label: 'Label Two', disabled: true},
                     {value: 'Three', label: 'Label Three'},
                 ],
-            });
+            }).setChoices([
-
-            choices15.setChoices([
                 {value: 'Four', label: 'Label Four', disabled: true},
                 {value: 'Five', label: 'Label Five'},
                 {value: 'Six', label: 'Label Six', selected: true},
@@ -264,9 +264,7 @@
                     {value: 'Two', label: 'Label Two', disabled: true},
                     {value: 'Three', label: 'Label Three'},
                 ],
-            });
+            }).setValueByChoice('Two');
-
-            choices16.setValueByChoice('Two');
         });
     </script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./assets/scripts/dist/choices.min.js",
   "scripts": {