Resolve failing tests

assets/scripts/src/choices.js

@@ -1525,24 +1525,6 @@ class Choices {
     this.input.element.removeEventListener('blur', this._onBlur);
   }
 
-  /**
-   * Set the correct input width based on placeholder
-   * value or input value
-   * @return
-   */
-  _setInputWidth() {
-    if (this.placeholder) {
-      // If there is a placeholder, we only want to set the width of the input when it is a greater
-      // length than 75% of the placeholder. This stops the input jumping around.
-      if (this.input.element.value && this.input.element.value.length >= (this.placeholder.length / 1.25)) {
-        this.input.element.style.width = getWidthOfInput(this.input.element);
-      }
-    } else {
-      // If there is no placeholder, resize input to contents
-      this.input.element.style.width = getWidthOfInput(this.input.element);
-    }
-  }
-
   /**
    * Key down event
    * @param  {Object} e Event
@@ -1582,7 +1564,11 @@ class Choices {
       // If CTRL + A or CMD + A have been pressed and there are items to select
       if (ctrlDownKey && hasItems) {
         this.canSearch = false;
-        if (this.config.removeItems && !this.input.element.value && this.input.element === document.activeElement) {
+        if (
+          this.config.removeItems &&
+          !this.input.element.value &&
+          this.input.element === document.activeElement
+        ) {
           // Highlight items
           this.highlightAll();
         }

assets/scripts/src/components/input.js

@@ -1,5 +1,7 @@
+import { getWidthOfInput } from '../lib/utils';
+
 /**
- * Dropdown
+ * Input
  */
 export default class Input {
   constructor(instance, element, classNames) {
@@ -19,9 +21,30 @@ export default class Input {
     }
 
     if (setWidth) {
-      this._setInputWidth();
+      this.setWidth();
     }
 
     return this.instance;
   }
+
+  /**
+   * Set the correct input width based on placeholder
+   * value or input value
+   * @return
+   */
+  setWidth() {
+    if (this.instance.placeholder) {
+      // If there is a placeholder, we only want to set the width of the input when it is a greater
+      // length than 75% of the placeholder. This stops the input jumping around.
+      if (
+        this.element.value &&
+        this.element.value.length >= (this.instance.placeholder.length / 1.25)
+      ) {
+        this.element.style.width = getWidthOfInput(this.element);
+      }
+    } else {
+      // If there is no placeholder, resize input to contents
+      this.element.style.width = getWidthOfInput(this.element);
+    }
+  }
 }

tests/spec/choices_spec.js

@@ -259,7 +259,7 @@ describe('Choices', () => {
       this.choices.input.element.value = 'test';
 
       this.choices._onKeyDown({
-        target: this.choices.input,
+        target: this.choices.input.element,
         keyCode: 13,
         ctrlKey: false,
       });
@@ -329,7 +329,7 @@ describe('Choices', () => {
       for (let i = 0; i < 2; i++) {
         // Key down to third choice
         this.choices._onKeyDown({
-          target: this.choices.input,
+          target: this.choices.input.element,
           keyCode: 40,
           ctrlKey: false,
           preventDefault: () => {},
@@ -345,7 +345,7 @@ describe('Choices', () => {
 
       // Key down to second choice
       this.choices._onKeyDown({
-        target: this.choices.input,
+        target: this.choices.input.element,
         keyCode: 40,
         ctrlKey: false,
         preventDefault: () => {},
@@ -405,7 +405,7 @@ describe('Choices', () => {
         preventDefault: () => {},
       });
 
-      expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(true);
+      expect(document.activeElement === this.choices.input.element && container.classList.contains('is-open')).toBe(true);
     });
 
     it('should close the dropdown on double click', function() {
@@ -425,7 +425,7 @@ describe('Choices', () => {
         preventDefault: () => {},
       });
 
-      expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
+      expect(document.activeElement === this.choices.input.element && container.classList.contains(openState)).toBe(false);
     });
 
     it('should set scrolling flag and not hide dropdown when scrolling on IE', function() {