mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-13 03:12:41 +02:00
Begin moving input to component
This commit is contained in:
parent
579fd3e824
commit
336b65fef9
|
@ -3,6 +3,7 @@ import classNames from 'classnames';
|
||||||
import Store from './store/index';
|
import Store from './store/index';
|
||||||
import Dropdown from './components/dropdown';
|
import Dropdown from './components/dropdown';
|
||||||
import Container from './components/container';
|
import Container from './components/container';
|
||||||
|
import Input from './components/input';
|
||||||
import {
|
import {
|
||||||
addItem,
|
addItem,
|
||||||
removeItem,
|
removeItem,
|
||||||
|
@ -516,7 +517,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const canAddItem = this._canAddItem(activeItems, this.input.value);
|
const canAddItem = this._canAddItem(activeItems, this.input.element.value);
|
||||||
|
|
||||||
// If we have choices to show
|
// If we have choices to show
|
||||||
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
|
||||||
|
@ -751,8 +752,8 @@ class Choices {
|
||||||
this.dropdown.show();
|
this.dropdown.show();
|
||||||
|
|
||||||
// Optionally focus the input if we have a search input
|
// Optionally focus the input if we have a search input
|
||||||
if (focusInput && this.canSearch && document.activeElement !== this.input) {
|
if (focusInput && this.canSearch && document.activeElement !== this.input.element) {
|
||||||
this.input.focus();
|
this.input.element.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
triggerEvent(this.passedElement, 'showDropdown', {});
|
triggerEvent(this.passedElement, 'showDropdown', {});
|
||||||
|
@ -770,11 +771,11 @@ class Choices {
|
||||||
|
|
||||||
// IE11 ignores aria-label and blocks virtual keyboard
|
// IE11 ignores aria-label and blocks virtual keyboard
|
||||||
// if aria-activedescendant is set without a dropdown
|
// if aria-activedescendant is set without a dropdown
|
||||||
this.input.removeAttribute('aria-activedescendant');
|
this.input.element.removeAttribute('aria-activedescendant');
|
||||||
|
|
||||||
// Optionally blur the input if we have a search input
|
// Optionally blur the input if we have a search input
|
||||||
if (blurInput && this.canSearch && document.activeElement === this.input) {
|
if (blurInput && this.canSearch && document.activeElement === this.input.element) {
|
||||||
this.input.blur();
|
this.input.element.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
triggerEvent(this.passedElement, 'hideDropdown', {});
|
triggerEvent(this.passedElement, 'hideDropdown', {});
|
||||||
|
@ -1001,13 +1002,8 @@ class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
clearInput() {
|
clearInput() {
|
||||||
if (this.input.value) {
|
const shouldSetInputWidth = !this.isSelectOneElement;
|
||||||
this.input.value = '';
|
this.input.clear(shouldSetInputWidth);
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.isSelectOneElement) {
|
|
||||||
this._setInputWidth();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.isTextElement && this.config.searchEnabled) {
|
if (!this.isTextElement && this.config.searchEnabled) {
|
||||||
this.isSearching = false;
|
this.isSearching = false;
|
||||||
|
@ -1034,7 +1030,7 @@ class Choices {
|
||||||
if (isDisabled) {
|
if (isDisabled) {
|
||||||
this._addEventListeners();
|
this._addEventListeners();
|
||||||
this.passedElement.removeAttribute('disabled');
|
this.passedElement.removeAttribute('disabled');
|
||||||
this.input.removeAttribute('disabled');
|
this.input.element.removeAttribute('disabled');
|
||||||
this.containerOuter.enable();
|
this.containerOuter.enable();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1057,7 +1053,7 @@ class Choices {
|
||||||
if (isEnabled) {
|
if (isEnabled) {
|
||||||
this._removeEventListeners();
|
this._removeEventListeners();
|
||||||
this.passedElement.setAttribute('disabled', '');
|
this.passedElement.setAttribute('disabled', '');
|
||||||
this.input.setAttribute('disabled', '');
|
this.input.element.setAttribute('disabled', '');
|
||||||
this.containerOuter.disable();
|
this.containerOuter.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1183,8 +1179,8 @@ class Choices {
|
||||||
|
|
||||||
// Focus input as without focus, a user cannot do anything with a
|
// Focus input as without focus, a user cannot do anything with a
|
||||||
// highlighted item
|
// highlighted item
|
||||||
if (document.activeElement !== this.input) {
|
if (document.activeElement !== this.input.element) {
|
||||||
this.input.focus();
|
this.input.element.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1253,7 +1249,7 @@ class Choices {
|
||||||
// If editing the last item is allowed and there are not other selected items,
|
// If editing the last item is allowed and there are not other selected items,
|
||||||
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
||||||
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
||||||
this.input.value = lastItem.value;
|
this.input.element.value = lastItem.value;
|
||||||
this._setInputWidth();
|
this._setInputWidth();
|
||||||
this._removeItem(lastItem);
|
this._removeItem(lastItem);
|
||||||
this._triggerChange(lastItem.value);
|
this._triggerChange(lastItem.value);
|
||||||
|
@ -1343,7 +1339,7 @@ class Choices {
|
||||||
placeholderItem.innerHTML = this.config.loadingText;
|
placeholderItem.innerHTML = this.config.loadingText;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.input.placeholder = this.config.loadingText;
|
this.input.element.placeholder = this.config.loadingText;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Remove loading states/text
|
// Remove loading states/text
|
||||||
|
@ -1352,7 +1348,7 @@ class Choices {
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
placeholderItem.innerHTML = (this.placeholder || '');
|
placeholderItem.innerHTML = (this.placeholder || '');
|
||||||
} else {
|
} else {
|
||||||
this.input.placeholder = (this.placeholder || '');
|
this.input.element.placeholder = (this.placeholder || '');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1455,7 +1451,7 @@ class Choices {
|
||||||
const hasUnactiveChoices = choices.some(option => !option.active);
|
const hasUnactiveChoices = choices.some(option => !option.active);
|
||||||
|
|
||||||
// Run callback if it is a function
|
// Run callback if it is a function
|
||||||
if (this.input === document.activeElement) {
|
if (this.input.element === document.activeElement) {
|
||||||
// Check that we have a value to search and the input was an alphanumeric character
|
// Check that we have a value to search and the input was an alphanumeric character
|
||||||
if (value && value.length >= this.config.searchFloor) {
|
if (value && value.length >= this.config.searchFloor) {
|
||||||
let resultCount = 0;
|
let resultCount = 0;
|
||||||
|
@ -1498,10 +1494,10 @@ class Choices {
|
||||||
this.containerOuter.element.addEventListener('blur', this._onBlur);
|
this.containerOuter.element.addEventListener('blur', this._onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.addEventListener('input', this._onInput);
|
this.input.element.addEventListener('input', this._onInput);
|
||||||
this.input.addEventListener('paste', this._onPaste);
|
this.input.element.addEventListener('paste', this._onPaste);
|
||||||
this.input.addEventListener('focus', this._onFocus);
|
this.input.element.addEventListener('focus', this._onFocus);
|
||||||
this.input.addEventListener('blur', this._onBlur);
|
this.input.element.addEventListener('blur', this._onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1523,10 +1519,10 @@ class Choices {
|
||||||
this.containerOuter.element.removeEventListener('blur', this._onBlur);
|
this.containerOuter.element.removeEventListener('blur', this._onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.removeEventListener('input', this._onInput);
|
this.input.element.removeEventListener('input', this._onInput);
|
||||||
this.input.removeEventListener('paste', this._onPaste);
|
this.input.element.removeEventListener('paste', this._onPaste);
|
||||||
this.input.removeEventListener('focus', this._onFocus);
|
this.input.element.removeEventListener('focus', this._onFocus);
|
||||||
this.input.removeEventListener('blur', this._onBlur);
|
this.input.element.removeEventListener('blur', this._onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1538,12 +1534,12 @@ class Choices {
|
||||||
if (this.placeholder) {
|
if (this.placeholder) {
|
||||||
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
// 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.
|
// length than 75% of the placeholder. This stops the input jumping around.
|
||||||
if (this.input.value && this.input.value.length >= (this.placeholder.length / 1.25)) {
|
if (this.input.element.value && this.input.element.value.length >= (this.placeholder.length / 1.25)) {
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this.input.element.style.width = getWidthOfInput(this.input.element);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// If there is no placeholder, resize input to contents
|
// If there is no placeholder, resize input to contents
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this.input.element.style.width = getWidthOfInput(this.input.element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1553,13 +1549,13 @@ class Choices {
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
_onKeyDown(e) {
|
_onKeyDown(e) {
|
||||||
if (e.target !== this.input && !this.containerOuter.element.contains(e.target)) {
|
if (e.target !== this.input.element && !this.containerOuter.element.contains(e.target)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const hasFocusedInput = this.input === document.activeElement;
|
const hasFocusedInput = this.input.element === document.activeElement;
|
||||||
const hasActiveDropdown = this.dropdown.isActive;
|
const hasActiveDropdown = this.dropdown.isActive;
|
||||||
const hasItems = this.itemList && this.itemList.children;
|
const hasItems = this.itemList && this.itemList.children;
|
||||||
const keyString = String.fromCharCode(e.keyCode);
|
const keyString = String.fromCharCode(e.keyCode);
|
||||||
|
@ -1586,7 +1582,7 @@ class Choices {
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (ctrlDownKey && hasItems) {
|
if (ctrlDownKey && hasItems) {
|
||||||
this.canSearch = false;
|
this.canSearch = false;
|
||||||
if (this.config.removeItems && !this.input.value && this.input === document.activeElement) {
|
if (this.config.removeItems && !this.input.element.value && this.input.element === document.activeElement) {
|
||||||
// Highlight items
|
// Highlight items
|
||||||
this.highlightAll();
|
this.highlightAll();
|
||||||
}
|
}
|
||||||
|
@ -1596,7 +1592,7 @@ class Choices {
|
||||||
const onEnterKey = () => {
|
const onEnterKey = () => {
|
||||||
// If enter key is pressed and the input has a value
|
// If enter key is pressed and the input has a value
|
||||||
if (this.isTextElement && target.value) {
|
if (this.isTextElement && target.value) {
|
||||||
const value = this.input.value;
|
const value = this.input.element.value;
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
// All is good, add
|
// All is good, add
|
||||||
|
@ -1719,11 +1715,11 @@ class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_onKeyUp(e) {
|
_onKeyUp(e) {
|
||||||
if (e.target !== this.input) {
|
if (e.target !== this.input.element) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = this.input.value;
|
const value = this.input.element.value;
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
|
@ -1762,7 +1758,7 @@ class Choices {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else if (this.canSearch && canAddItem.response) {
|
} else if (this.canSearch && canAddItem.response) {
|
||||||
this._handleSearch(this.input.value);
|
this._handleSearch(this.input.element.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Re-establish canSearch value from changes in _onKeyDown
|
// Re-establish canSearch value from changes in _onKeyDown
|
||||||
|
@ -1810,8 +1806,8 @@ class Choices {
|
||||||
) {
|
) {
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
// If text element, we only want to focus the input (if it isn't already)
|
// If text element, we only want to focus the input (if it isn't already)
|
||||||
if (document.activeElement !== this.input) {
|
if (document.activeElement !== this.input.element) {
|
||||||
this.input.focus();
|
this.input.element.focus();
|
||||||
}
|
}
|
||||||
} else if (!hasActiveDropdown) {
|
} else if (!hasActiveDropdown) {
|
||||||
// If a select box, we want to show the dropdown
|
// If a select box, we want to show the dropdown
|
||||||
|
@ -1839,7 +1835,7 @@ class Choices {
|
||||||
this.isScrollingOnIe = true;
|
this.isScrollingOnIe = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.containerOuter.element.contains(target) && target !== this.input) {
|
if (this.containerOuter.element.contains(target) && target !== this.input.element) {
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const hasShiftKey = e.shiftKey;
|
const hasShiftKey = e.shiftKey;
|
||||||
|
|
||||||
|
@ -1879,8 +1875,8 @@ class Choices {
|
||||||
|
|
||||||
if (!hasActiveDropdown) {
|
if (!hasActiveDropdown) {
|
||||||
if (this.isTextElement) {
|
if (this.isTextElement) {
|
||||||
if (document.activeElement !== this.input) {
|
if (document.activeElement !== this.input.element) {
|
||||||
this.input.focus();
|
this.input.element.focus();
|
||||||
}
|
}
|
||||||
} else if (this.canSearch) {
|
} else if (this.canSearch) {
|
||||||
this.showDropdown(true);
|
this.showDropdown(true);
|
||||||
|
@ -1890,7 +1886,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
this.isSelectOneElement &&
|
this.isSelectOneElement &&
|
||||||
target !== this.input &&
|
target !== this.input.element &&
|
||||||
!this.dropdown.element.contains(target)
|
!this.dropdown.element.contains(target)
|
||||||
) {
|
) {
|
||||||
this.hideDropdown(true);
|
this.hideDropdown(true);
|
||||||
|
@ -1937,7 +1933,7 @@ class Choices {
|
||||||
*/
|
*/
|
||||||
_onPaste(e) {
|
_onPaste(e) {
|
||||||
// Disable pasting into the input if option has been set
|
// Disable pasting into the input if option has been set
|
||||||
if (e.target === this.input && !this.config.paste) {
|
if (e.target === this.input.element && !this.config.paste) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1955,13 +1951,13 @@ class Choices {
|
||||||
const hasActiveDropdown = this.dropdown.isActive;
|
const hasActiveDropdown = this.dropdown.isActive;
|
||||||
const focusActions = {
|
const focusActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
if (target === this.input) {
|
if (target === this.input.element) {
|
||||||
this.containerOuter.focus();
|
this.containerOuter.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'select-one': () => {
|
'select-one': () => {
|
||||||
this.containerOuter.focus();
|
this.containerOuter.focus();
|
||||||
if (target === this.input) {
|
if (target === this.input.element) {
|
||||||
// Show dropdown if it isn't already showing
|
// Show dropdown if it isn't already showing
|
||||||
if (!hasActiveDropdown) {
|
if (!hasActiveDropdown) {
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
|
@ -1969,7 +1965,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'select-multiple': () => {
|
'select-multiple': () => {
|
||||||
if (target === this.input) {
|
if (target === this.input.element) {
|
||||||
// If element is a select box, the focused element is the container and the dropdown
|
// If element is a select box, the focused element is the container and the dropdown
|
||||||
// isn't already open, focus and show dropdown
|
// isn't already open, focus and show dropdown
|
||||||
this.containerOuter.focus();
|
this.containerOuter.focus();
|
||||||
|
@ -2000,7 +1996,7 @@ class Choices {
|
||||||
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
const hasHighlightedItems = activeItems.some(item => item.highlighted);
|
||||||
const blurActions = {
|
const blurActions = {
|
||||||
text: () => {
|
text: () => {
|
||||||
if (target === this.input) {
|
if (target === this.input.element) {
|
||||||
// Remove the focus state
|
// Remove the focus state
|
||||||
this.containerOuter.blur();
|
this.containerOuter.blur();
|
||||||
// De-select any highlighted items
|
// De-select any highlighted items
|
||||||
|
@ -2021,13 +2017,13 @@ class Choices {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (target === this.input && hasActiveDropdown) {
|
if (target === this.input.element && hasActiveDropdown) {
|
||||||
// Hide dropdown if it is showing
|
// Hide dropdown if it is showing
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'select-multiple': () => {
|
'select-multiple': () => {
|
||||||
if (target === this.input) {
|
if (target === this.input.element) {
|
||||||
// Remove the focus state
|
// Remove the focus state
|
||||||
this.containerOuter.blur();
|
this.containerOuter.blur();
|
||||||
// Hide dropdown if it is showing
|
// Hide dropdown if it is showing
|
||||||
|
@ -2048,7 +2044,7 @@ class Choices {
|
||||||
// closes the dropdown. To stop this, we refocus our input
|
// closes the dropdown. To stop this, we refocus our input
|
||||||
// if we know we are on IE *and* are scrolling.
|
// if we know we are on IE *and* are scrolling.
|
||||||
this.isScrollingOnIe = false;
|
this.isScrollingOnIe = false;
|
||||||
this.input.focus();
|
this.input.element.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2159,7 +2155,7 @@ class Choices {
|
||||||
if (hasActiveDropdown) {
|
if (hasActiveDropdown) {
|
||||||
// IE11 ignores aria-label and blocks virtual keyboard
|
// IE11 ignores aria-label and blocks virtual keyboard
|
||||||
// if aria-activedescendant is set without a dropdown
|
// if aria-activedescendant is set without a dropdown
|
||||||
this.input.setAttribute('aria-activedescendant', passedEl.id);
|
this.input.element.setAttribute('aria-activedescendant', passedEl.id);
|
||||||
this.containerOuter.element.setAttribute('aria-activedescendant', passedEl.id);
|
this.containerOuter.element.setAttribute('aria-activedescendant', passedEl.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2668,7 +2664,7 @@ class Choices {
|
||||||
|
|
||||||
this.containerOuter = new Container(this, containerOuter);
|
this.containerOuter = new Container(this, containerOuter);
|
||||||
this.containerInner = new Container(this, containerInner);
|
this.containerInner = new Container(this, containerInner);
|
||||||
this.input = input;
|
this.input = new Input(this, input);
|
||||||
this.choiceList = choiceList;
|
this.choiceList = choiceList;
|
||||||
this.itemList = itemList;
|
this.itemList = itemList;
|
||||||
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
||||||
|
|
|
@ -7,4 +7,21 @@ export default class Input {
|
||||||
this.element = element;
|
this.element = element;
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set value of input to blank
|
||||||
|
* @return {Object} Class instance
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
clear(setWidth = true) {
|
||||||
|
if (this.element.value) {
|
||||||
|
this.element.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setWidth) {
|
||||||
|
this._setInputWidth();
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.instance;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -131,7 +131,7 @@ describe('Choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should create an input', function() {
|
it('should create an input', function() {
|
||||||
expect(this.choices.input).toEqual(jasmine.any(HTMLElement));
|
expect(this.choices.input.element).toEqual(jasmine.any(HTMLElement));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should create a dropdown', function() {
|
it('should create a dropdown', function() {
|
||||||
|
@ -173,33 +173,33 @@ describe('Choices', () => {
|
||||||
|
|
||||||
it('should apply placeholderValue to input', function() {
|
it('should apply placeholderValue to input', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not apply searchPlaceholderValue to input', function() {
|
it('should not apply searchPlaceholderValue to input', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
expect(this.choices.input.placeholder).not.toEqual('Test');
|
expect(this.choices.input.element.placeholder).not.toEqual('Test');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should accept a user inputted value', function() {
|
it('should accept a user inputted value', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'test';
|
this.choices.input.element.value = 'test';
|
||||||
|
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(this.choices.currentState.items[0].value).toContain(this.choices.input.value);
|
expect(this.choices.currentState.items[0].value).toContain(this.choices.input.element.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should copy the passed placeholder to the cloned input', function() {
|
it('should copy the passed placeholder to the cloned input', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
|
|
||||||
expect(this.choices.input.placeholder).toEqual(this.input.placeholder);
|
expect(this.choices.input.element.placeholder).toEqual(this.input.placeholder);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not allow duplicates if duplicateItems is false', function() {
|
it('should not allow duplicates if duplicateItems is false', function() {
|
||||||
|
@ -208,16 +208,16 @@ describe('Choices', () => {
|
||||||
items: ['test 1'],
|
items: ['test 1'],
|
||||||
});
|
});
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'test 1';
|
this.choices.input.element.value = 'test 1';
|
||||||
|
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(this.choices.currentState.items[this.choices.currentState.items.length - 1]).not.toContain(this.choices.input.value);
|
expect(this.choices.currentState.items[this.choices.currentState.items.length - 1]).not.toContain(this.choices.input.element.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should filter input if regexFilter is passed', function() {
|
it('should filter input if regexFilter is passed', function() {
|
||||||
|
@ -225,20 +225,20 @@ describe('Choices', () => {
|
||||||
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'josh@joshuajohnson.co.uk';
|
this.choices.input.element.value = 'josh@joshuajohnson.co.uk';
|
||||||
|
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'not an email address';
|
this.choices.input.element.value = 'not an email address';
|
||||||
|
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
@ -255,8 +255,8 @@ describe('Choices', () => {
|
||||||
appendValue: '-value',
|
appendValue: '-value',
|
||||||
});
|
});
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'test';
|
this.choices.input.element.value = 'test';
|
||||||
|
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input,
|
||||||
|
@ -298,7 +298,7 @@ describe('Choices', () => {
|
||||||
placeholderValue: 'Placeholder',
|
placeholderValue: 'Placeholder',
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(this.choices.input.placeholder).not.toEqual('Placeholder');
|
expect(this.choices.input.element.placeholder).not.toEqual('Placeholder');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should apply searchPlaceholderValue to input', function() {
|
it('should apply searchPlaceholderValue to input', function() {
|
||||||
|
@ -306,12 +306,12 @@ describe('Choices', () => {
|
||||||
searchPlaceholderValue: 'Placeholder',
|
searchPlaceholderValue: 'Placeholder',
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(this.choices.input.placeholder).toEqual('Placeholder');
|
expect(this.choices.input.element.placeholder).toEqual('Placeholder');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should open the choice list on focusing', function() {
|
it('should open the choice list on focusing', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
expect(this.choices.dropdown.element.classList).toContain(this.choices.config.classNames.activeState);
|
expect(this.choices.dropdown.element.classList).toContain(this.choices.config.classNames.activeState);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -324,7 +324,7 @@ describe('Choices', () => {
|
||||||
this.choices = new Choices(this.input, {
|
this.choices = new Choices(this.input, {
|
||||||
renderChoiceLimit: -1,
|
renderChoiceLimit: -1,
|
||||||
});
|
});
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
|
|
||||||
for (let i = 0; i < 2; i++) {
|
for (let i = 0; i < 2; i++) {
|
||||||
// Key down to third choice
|
// Key down to third choice
|
||||||
|
@ -341,7 +341,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
it('should select choice on enter key press', function() {
|
it('should select choice on enter key press', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
|
|
||||||
// Key down to second choice
|
// Key down to second choice
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
|
@ -353,7 +353,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
// Key down to select choice
|
// Key down to select choice
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
preventDefault: () => {},
|
preventDefault: () => {},
|
||||||
|
@ -372,11 +372,11 @@ describe('Choices', () => {
|
||||||
passedElement.addEventListener('change', changeSpy);
|
passedElement.addEventListener('change', changeSpy);
|
||||||
passedElement.addEventListener('addItem', addSpy);
|
passedElement.addEventListener('addItem', addSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
|
|
||||||
// Key down to second choice
|
// Key down to second choice
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 40,
|
keyCode: 40,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
preventDefault: () => {},
|
preventDefault: () => {},
|
||||||
|
@ -384,7 +384,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
// Key down to select choice
|
// Key down to select choice
|
||||||
this.choices._onKeyDown({
|
this.choices._onKeyDown({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
preventDefault: () => {},
|
preventDefault: () => {},
|
||||||
|
@ -464,7 +464,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
passedElement.addEventListener('showDropdown', showDropdownSpy);
|
passedElement.addEventListener('showDropdown', showDropdownSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
|
|
||||||
this.choices._onClick({
|
this.choices._onClick({
|
||||||
target: container,
|
target: container,
|
||||||
|
@ -484,7 +484,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
passedElement.addEventListener('hideDropdown', hideDropdownSpy);
|
passedElement.addEventListener('hideDropdown', hideDropdownSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
|
|
||||||
this.choices._onClick({
|
this.choices._onClick({
|
||||||
target: container,
|
target: container,
|
||||||
|
@ -509,17 +509,17 @@ describe('Choices', () => {
|
||||||
|
|
||||||
passedElement.addEventListener('search', searchSpy);
|
passedElement.addEventListener('search', searchSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = '3 ';
|
this.choices.input.element.value = '3 ';
|
||||||
|
|
||||||
// Key down to search
|
// Key down to search
|
||||||
this.choices._onKeyUp({
|
this.choices._onKeyUp({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const mostAccurateResult = this.choices.currentState.choices.filter((choice) => choice.active);
|
const mostAccurateResult = this.choices.currentState.choices.filter(choice => choice.active);
|
||||||
|
|
||||||
expect(this.choices.isSearching && mostAccurateResult[0].value === 'Value 3').toBe(true);
|
expect(this.choices.isSearching && mostAccurateResult[0].value === 'Value 3').toBe(true);
|
||||||
expect(searchSpy).toHaveBeenCalled();
|
expect(searchSpy).toHaveBeenCalled();
|
||||||
|
@ -537,17 +537,17 @@ describe('Choices', () => {
|
||||||
|
|
||||||
passedElement.addEventListener('search', searchSpy);
|
passedElement.addEventListener('search', searchSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
this.choices.input.value = 'Javascript';
|
this.choices.input.element.value = 'Javascript';
|
||||||
|
|
||||||
// Key down to search
|
// Key down to search
|
||||||
this.choices._onKeyUp({
|
this.choices._onKeyUp({
|
||||||
target: this.choices.input,
|
target: this.choices.input.element,
|
||||||
keyCode: 13,
|
keyCode: 13,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const activeOptions = this.choices.currentState.choices.filter((choice) => choice.active);
|
const activeOptions = this.choices.currentState.choices.filter(choice => choice.active);
|
||||||
|
|
||||||
expect(activeOptions.length).toEqual(this.choices.currentState.choices.length);
|
expect(activeOptions.length).toEqual(this.choices.currentState.choices.length);
|
||||||
expect(searchSpy).toHaveBeenCalled();
|
expect(searchSpy).toHaveBeenCalled();
|
||||||
|
@ -595,7 +595,7 @@ describe('Choices', () => {
|
||||||
searchPlaceholderValue: dummyPlaceholder,
|
searchPlaceholderValue: dummyPlaceholder,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(this.choices.input.placeholder).toEqual(dummyPlaceholder);
|
expect(this.choices.input.element.placeholder).toEqual(dummyPlaceholder);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -644,11 +644,11 @@ describe('Choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should apply placeholderValue to input', function() {
|
it('should apply placeholderValue to input', function() {
|
||||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not apply searchPlaceholderValue to input', function() {
|
it('should not apply searchPlaceholderValue to input', function() {
|
||||||
expect(this.choices.input.placeholder).not.toEqual('Test');
|
expect(this.choices.input.element.placeholder).not.toEqual('Test');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add any pre-defined values', function() {
|
it('should add any pre-defined values', function() {
|
||||||
|
@ -660,7 +660,7 @@ describe('Choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add a placeholder defined in the config to the search input', function() {
|
it('should add a placeholder defined in the config to the search input', function() {
|
||||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -872,7 +872,7 @@ describe('Choices', () => {
|
||||||
it('should handle disable()', function() {
|
it('should handle disable()', function() {
|
||||||
this.choices.disable();
|
this.choices.disable();
|
||||||
|
|
||||||
expect(this.choices.input.disabled).toBe(true);
|
expect(this.choices.input.element.disabled).toBe(true);
|
||||||
expect(this.choices.containerOuter.element.classList.contains(this.choices.config.classNames.disabledState)).toBe(true);
|
expect(this.choices.containerOuter.element.classList.contains(this.choices.config.classNames.disabledState)).toBe(true);
|
||||||
expect(this.choices.containerOuter.element.getAttribute('aria-disabled')).toBe('true');
|
expect(this.choices.containerOuter.element.getAttribute('aria-disabled')).toBe('true');
|
||||||
});
|
});
|
||||||
|
@ -880,7 +880,7 @@ describe('Choices', () => {
|
||||||
it('should handle enable()', function() {
|
it('should handle enable()', function() {
|
||||||
this.choices.enable();
|
this.choices.enable();
|
||||||
|
|
||||||
expect(this.choices.input.disabled).toBe(false);
|
expect(this.choices.input.element.disabled).toBe(false);
|
||||||
expect(this.choices.containerOuter.element.classList.contains(this.choices.config.classNames.disabledState)).toBe(false);
|
expect(this.choices.containerOuter.element.classList.contains(this.choices.config.classNames.disabledState)).toBe(false);
|
||||||
expect(this.choices.containerOuter.element.hasAttribute('aria-disabled')).toBe(false);
|
expect(this.choices.containerOuter.element.hasAttribute('aria-disabled')).toBe(false);
|
||||||
});
|
});
|
||||||
|
@ -961,7 +961,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
it('should handle clearInput()', function() {
|
it('should handle clearInput()', function() {
|
||||||
this.choices.clearInput();
|
this.choices.clearInput();
|
||||||
expect(this.choices.input.value).toBe('');
|
expect(this.choices.input.element.value).toBe('');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle removeItemsByValue()', function() {
|
it('should handle removeItemsByValue()', function() {
|
||||||
|
@ -1005,7 +1005,7 @@ describe('Choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const container = this.choices.containerOuter.element;
|
const container = this.choices.containerOuter.element;
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(true);
|
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1015,7 +1015,7 @@ describe('Choices', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const container = this.choices.containerOuter.element;
|
const container = this.choices.containerOuter.element;
|
||||||
this.choices.input.focus();
|
this.choices.input.element.focus();
|
||||||
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
|
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue