mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-07 00:12:40 +02:00
Open dropdown if typing
This commit is contained in:
parent
17e00f10fb
commit
2ccac3083d
4
assets/scripts/dist/bundle.js
vendored
4
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -10,7 +10,6 @@ import Sifter from 'sifter';
|
|||
* Choices
|
||||
*
|
||||
* To do:
|
||||
* - Dispatch events
|
||||
* - Remove item by clicking a target
|
||||
* - Set input width based on the size of the contents
|
||||
* - Single select input support
|
||||
|
@ -20,9 +19,8 @@ export class Choices {
|
|||
constructor(element = '[data-choice]', userOptions = {}) {
|
||||
|
||||
// Cutting the mustard
|
||||
const fakeEl = document.createElement("fakeel");
|
||||
const cuttingTheMustard = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
|
||||
if (!cuttingTheMustard) console.error('init: Your browser doesn\'nt support Choices');
|
||||
const cuttingTheMustard = 'querySelector' in document && 'addEventListener' in document && 'classList' in document.createElement("div");
|
||||
if (!cuttingTheMustard) console.error('init: Your browser doesn\'t support Choices');
|
||||
|
||||
// If there are multiple elements, create a new instance
|
||||
// for each element besides the first one (as that already has an instance)
|
||||
|
@ -105,6 +103,7 @@ export class Choices {
|
|||
this.render = this.render.bind(this);
|
||||
this.destroy = this.destroy.bind(this);
|
||||
|
||||
// Bind event handlers
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onBlur.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
|
@ -113,7 +112,6 @@ export class Choices {
|
|||
this.onPaste = this.onPaste.bind(this);
|
||||
|
||||
const classNames = this.options.classNames;
|
||||
|
||||
this.templates = {
|
||||
containerOuter: () => {
|
||||
return strToEl(`<div class="${ classNames.containerOuter }"></div>`);
|
||||
|
@ -258,9 +256,8 @@ export class Choices {
|
|||
* @return
|
||||
*/
|
||||
onKeyDown(e) {
|
||||
const activeItems = this.getItemsFilteredByActive();
|
||||
const activeOptions = this.getOptionsFilteredByActive();
|
||||
const inputIsFocussed = this.input === document.activeElement;
|
||||
if(e.target !== this.input) return;
|
||||
|
||||
const ctrlDownKey = e.ctrlKey || e.metaKey;
|
||||
const backKey = 46;
|
||||
const deleteKey = 8;
|
||||
|
@ -269,12 +266,19 @@ export class Choices {
|
|||
const escapeKey = 27;
|
||||
const upKey = 38;
|
||||
const downKey = 40;
|
||||
const hasActiveDropDown = this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState);
|
||||
const hasItems = this.list && this.list.children;
|
||||
|
||||
// If we are typing in the input
|
||||
if(e.target === this.input) {
|
||||
// this.input.style.width = getWidthOfInput(this.input);
|
||||
const activeItems = this.getItemsFilteredByActive();
|
||||
const activeOptions = this.getOptionsFilteredByActive();
|
||||
const hasFocussedInput = this.input === document.activeElement;
|
||||
const hasActiveDropdown = this.dropdown && this.dropdown.classList.contains(this.options.classNames.activeState);
|
||||
const hasItems = this.list && this.list.children;
|
||||
const keyString = String.fromCharCode(event.keyCode);
|
||||
|
||||
// If a user is typing and the dropdown is not active
|
||||
if(/[a-zA-Z0-9-_ ]/.test(keyString) && this.dropdown && !hasActiveDropdown) {
|
||||
this.toggleDropdown();
|
||||
}
|
||||
|
||||
switch (e.keyCode) {
|
||||
case aKey:
|
||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||
|
@ -291,7 +295,7 @@ export class Choices {
|
|||
this.handleEnter(activeItems, value);
|
||||
}
|
||||
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
|
||||
const highlighted = this.dropdown.querySelector(`.${this.options.classNames.highlightedState}`);
|
||||
|
||||
if(highlighted) {
|
||||
|
@ -304,14 +308,14 @@ export class Choices {
|
|||
}
|
||||
break;
|
||||
case escapeKey:
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
|
||||
this.toggleDropdown();
|
||||
}
|
||||
break;
|
||||
case downKey:
|
||||
case upKey:
|
||||
// If up or down key is pressed, traverse through options
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropDown) {
|
||||
if(this.passedElement.type === 'select-multiple' && hasActiveDropdown) {
|
||||
const selectableOptions = activeOptions.filter((option) => {
|
||||
return !option.selected;
|
||||
});
|
||||
|
@ -344,7 +348,7 @@ export class Choices {
|
|||
case backKey:
|
||||
case deleteKey:
|
||||
// If backspace or delete key is pressed and the input has no value
|
||||
if(inputIsFocussed && !e.target.value) {
|
||||
if(hasFocussedInput && !e.target.value) {
|
||||
this.handleBackspaceKey(activeItems);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
@ -353,7 +357,6 @@ export class Choices {
|
|||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Key up event
|
||||
|
@ -361,10 +364,15 @@ export class Choices {
|
|||
* @return
|
||||
*/
|
||||
onKeyUp(e) {
|
||||
if(e.target === this.input) {
|
||||
if(e.target !== this.input) return;
|
||||
|
||||
if(this.passedElement.type === 'select-multiple' && this.options.allowSearch) {
|
||||
const charStr = String.fromCharCode(e.keyCode);
|
||||
if(this.input === document.activeElement && /[a-z0-9]/i.test(charStr)) {
|
||||
const options = this.getOptions();
|
||||
const hasUnactiveOptions = options.some((option) => {
|
||||
return option.active !== true;
|
||||
});
|
||||
|
||||
if(this.input === document.activeElement) {
|
||||
if(this.input.value) {
|
||||
// If we have a value, filter options based on it
|
||||
const handleFilter = debounce(() => {
|
||||
|
@ -379,14 +387,13 @@ export class Choices {
|
|||
}, 100)
|
||||
|
||||
handleFilter();
|
||||
} else {
|
||||
} else if(hasUnactiveOptions) {
|
||||
// Otherwise reset options to active
|
||||
this.store.dispatch(activateOptions());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue