Merge branch 'develop' into develop

src/scripts/choices.js

@@ -1001,8 +1001,6 @@ class Choices {
       this.showDropdown(true);
     }
 
-    this.config.searchEnabled = this.config.searchEnabled;
-
     const onAKey = () => {
       // If CTRL + A or CMD + A have been pressed and there are items to select
       if (ctrlDownKey && hasItems) {
@@ -1186,7 +1184,6 @@ class Choices {
 
       // If user has removed value...
       if ((keyCode === backKey || keyCode === deleteKey) && !target.value) {
-        // ...and it is a multiple select input, activate choices (if searching)
         if (!this._isTextElement && this._isSearching) {
           this._isSearching = false;
           this._store.dispatch(activateChoices(true));
@@ -1211,11 +1208,12 @@ class Choices {
     // If a user tapped within our container...
     if (this._wasTap === true && this.containerOuter.element.contains(target)) {
       // ...and we aren't dealing with a single select box, show dropdown/focus input
-      if (
-        (target === this.containerOuter.element ||
-          target === this.containerInner.element) &&
-        !this._isSelectOneElement
-      ) {
+
+      const containerWasTarget =
+        target === this.containerOuter.element ||
+        target === this.containerInner.element;
+
+      if (containerWasTarget && !this._isSelectOneElement) {
         if (this._isTextElement) {
           // If text element, we only want to focus the input
           this.input.focus();
@@ -1286,8 +1284,7 @@ class Choices {
           this.showDropdown(true);
         } else {
           this.showDropdown();
-          // code smell
-          this.containerOuter.focus();
+          this.containerOuter.focus(); // code smell 🤢
         }
       } else if (
         this._isSelectOneElement &&
@@ -1322,7 +1319,6 @@ class Choices {
       'select-one': () => {
         this.containerOuter.addFocusState();
         if (target === this.input.element) {
-          // Show dropdown if it isn't already showing
           this.showDropdown();
         }
       },
@@ -1350,9 +1346,7 @@ class Choices {
       const blurActions = {
         text: () => {
           if (target === this.input.element) {
-            // Remove the focus state
             this.containerOuter.removeFocusState();
-            // De-select any highlighted items
             if (hasHighlightedItems) {
               this.unhighlightAll();
             }
@@ -1371,10 +1365,8 @@ class Choices {
         },
         'select-multiple': () => {
           if (target === this.input.element) {
-            // Remove the focus state
             this.containerOuter.removeFocusState();
             this.hideDropdown();
-            // De-select any highlighted items
             if (hasHighlightedItems) {
               this.unhighlightAll();
             }
@@ -1960,12 +1952,10 @@ class Choices {
     const { activeGroups, activeChoices } = this._store;
     let choiceListFragment = document.createDocumentFragment();
 
-    // Clear choices
     this.choiceList.clear();
 
-    // Scroll back to top of choices list
     if (this.config.resetScrollPosition) {
-      this.choiceList.scrollToTop();
+      requestAnimationFrame(() => this.choiceList.scrollToTop());
     }
 
     // If we have grouped options
@@ -2055,6 +2045,5 @@ class Choices {
 }
 
 Choices.userDefaults = {};
-
 // We cannot export default here due to Webpack: https://github.com/webpack/webpack/issues/3929
 module.exports = Choices;

src/scripts/components/input.js

@@ -95,16 +95,20 @@ export default class Input {
           this.element.value.length >= this._placeholderValue.length / 1.25) ||
         enforceWidth
       ) {
-        this.element.style.width = this.calcWidth();
+        this.calcWidth(width => {
+          this.element.style.width = width;
+        });
       }
     } else {
       // If there is no placeholder, resize input to contents
-      this.element.style.width = this.calcWidth();
+      this.calcWidth(width => {
+        this.element.style.width = width;
+      });
     }
   }
 
-  calcWidth() {
-    return calcWidthOfInput(this.element);
+  calcWidth(callback) {
+    return calcWidthOfInput(this.element, callback);
   }
 
   setActiveDescendant(activeDescendantID) {

src/scripts/components/input.test.js

@@ -269,7 +269,7 @@ describe('components/input', () => {
     const inputWidth = '200px';
 
     beforeEach(() => {
-      calcWidthStub = stub(instance, 'calcWidth').returns(inputWidth);
+      calcWidthStub = stub(instance, 'calcWidth').callsArgWith(0, inputWidth);
     });
 
     afterEach(() => {

src/scripts/lib/utils.js

@@ -227,10 +227,10 @@ export const strToEl = (function() {
 }());
 
 /**
- * Sets the width of a passed input based on its value
- * @return {Number} Width of input
+ * Determines the width of a passed input based on its value and passes
+ * it to the supplied callback function.
  */
-export const calcWidthOfInput = (input) => {
+export const calcWidthOfInput = (input, callback) => {
   const value = input.value || input.placeholder;
   let width = input.offsetWidth;
 
@@ -259,14 +259,18 @@ export const calcWidthOfInput = (input) => {
 
     document.body.appendChild(testEl);
 
-    if (value && testEl.offsetWidth !== input.offsetWidth) {
-      width = testEl.offsetWidth + 4;
-    }
+    requestAnimationFrame(() => {
+      if (value && testEl.offsetWidth !== input.offsetWidth) {
+        width = testEl.offsetWidth + 4;
+      }
 
-    document.body.removeChild(testEl);
+      document.body.removeChild(testEl);
+
+      callback.call(this, `${width}px`);
+    });
+  } else {
+    callback.call(this, `${width}px`);
   }
-
-  return `${width}px`;
 };
 
 /**