perf: removed forced reflow ("layout thrashing") by reading testEl.offsetWidth in a separate animation frame

src/scripts/src/components/input.js

@@ -127,16 +127,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/src/components/input.test.js

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

src/scripts/src/lib/utils.js

@@ -482,10 +482,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;
 
@@ -514,14 +514,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`;
 };
 
 /**