diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index deac6e6..3794aa0 100644 --- a/assets/scripts/src/choices.js +++ b/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(); } diff --git a/assets/scripts/src/components/input.js b/assets/scripts/src/components/input.js index c5db52a..eb2a3f6 100644 --- a/assets/scripts/src/components/input.js +++ b/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); + } + } } diff --git a/tests/spec/choices_spec.js b/tests/spec/choices_spec.js index 590a822..edf27b6 100644 --- a/tests/spec/choices_spec.js +++ b/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() {