Remove unneccessary requestAnimation frame polyfill + type check before adding first predefined select option

README.md

@@ -618,6 +618,7 @@ Choices is compiled using [Babel](https://babeljs.io/) to enable support for [ES
 * Array.prototype.reduce
 * Array.prototype.indexOf
 * Element.prototype.classList
+* window.requestAnimationFrame
 
 ## Development
 To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:

assets/scripts/src/choices.js

@@ -782,6 +782,7 @@ export default class Choices {
                 this.isSearching = false;
                 this.store.dispatch(activateChoices(true));
 
+                // We only hide the dropdown on a choice selection for single select boxes
                 if (this.passedElement.type === 'select-one' && hasActiveDropdown) {
                     this.hideDropdown();
                 }
@@ -1004,7 +1005,9 @@ export default class Choices {
 
                     // All is good, add
                     if (canAddItem.response) {
-                        this.toggleDropdown();
+                        if (hasActiveDropdown) {
+                            this.hideDropdown();
+                        }
                         this._addItem(value);
                         this._triggerChange(value);
                         this.clearInput(this.passedElement);
@@ -1022,9 +1025,15 @@ export default class Choices {
                     if (highlighted) {
                         this._handleChoiceAction(activeItems, highlighted);
                     }
+
+                    // We always want to hide the dropdown for single selects
+                    // regardless of whether an item was added
+                    if (hasActiveDropdown && this.passedElement.type === 'select-one') {
+                        this.hideDropdown();
+                    }
                 } else if (this.passedElement.type === 'select-one') {
+                    // Open single select dropdown if it's not active
                     if (!hasActiveDropdown) {
-                        // Show dropdown if focus
                         this.showDropdown(true);
                         e.preventDefault();
                     }
@@ -1885,7 +1894,7 @@ export default class Choices {
                 allChoices
                     .concat(this.presetChoices)
                     .forEach((o, index) => {
-                        if (index === 0) {
+                        if (index === 0 && this.passedElement.type === 'select-one') {
                             this._addChoice(true, o.disabled ? o.disabled : false, o.value, o.label);
                         } else {
                             this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);

assets/scripts/src/lib/polyfills.js

@@ -110,36 +110,4 @@ if (!Array.prototype.find) {
         }
         return undefined;
     };
-}
-
-(function() {
-    "use strict";
-
-    var lastTime = 0,
-        vendors = ['ms', 'moz', 'webkit', 'o'],
-        x;
-
-    for (x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
-            window[vendors[x] + 'CancelRequestAnimationFrame'];
-    }
-
-    if (!window.requestAnimationFrame) {
-        window.requestAnimationFrame = function(callback, element) {
-            var currTime = new Date().getTime(),
-                timeToCall = Math.max(0, 16 - (currTime - lastTime)),
-                id = window.setTimeout(function() {
-                    callback(currTime + timeToCall);
-                }, timeToCall);
-            lastTime = currTime + timeToCall;
-            return id;
-        };
-    }
-
-    if (!window.cancelAnimationFrame) {
-        window.cancelAnimationFrame = function(id) {
-            window.clearTimeout(id);
-        };
-    }
-}());
+}

index.html

@@ -66,9 +66,9 @@
             <h2>Multiple select input</h2>
             <label for="choices-7">Default</label>
             <select class="form-control" data-choice name="choices-7" id="choices-7" placeholder="This is a placeholder" multiple>
-                <option value="Dropdown item 1">Dropdown item 1</option>
+                <option value="Dropdown item 1" selected>Dropdown item 1</option>
                 <option value="Dropdown item 2">Dropdown item 2</option>
-                <option value="Dropdown item 3" selected>Dropdown item 3</option>
+                <option value="Dropdown item 3">Dropdown item 3</option>
                 <option value="Dropdown item 4" disabled>Dropdown item 4</option>
             </select>