Skip to content

Commit

Permalink
Revert "fixed autocomplete control behaviour (#521)"
Browse files Browse the repository at this point in the history 
This reverts commit bede57c.
  • Loading branch information
@kevinchappell
kevinchappell committed Jun 7, 2017
1 parent bede57c commit 5cfd4cd
Showing 1 changed file with 28 additions and 113 deletions.
141 changes: 28 additions & 113 deletions src/js/control/autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,39 +14,40 @@ export default class controlAutocomplete extends control {
let {values, type, ...data} = this.config;
const keyboardNav = (e) => {
const list = e.target.nextSibling.nextSibling;
const hiddenField = e.target.nextSibling;
let activeOption = this.getActiveOption(list);
let activeOption = list.getElementsByClassName('active-option')[0];
const keyCodeMapVals = [
// up
[38, () => {
const previous = this.getPreviousOption(activeOption);
if (previous) {
this.selectOption(list, previous);
if (activeOption) {
if (activeOption.previousSibling) {
activeOption.classList.remove('active-option');
activeOption = activeOption.previousSibling;
activeOption.classList.add('active-option');
}
}
}],
// down
[40, () => {
const next = this.getNextOption(activeOption);
if (next) {
this.selectOption(list, next);
if (activeOption) {
if (activeOption.nextSibling) {
activeOption.classList.remove('active-option');
activeOption = activeOption.nextSibling;
activeOption.classList.add('active-option');
}
} else {
activeOption = list.firstChild;
activeOption.classList.add('active-option');
}
}],
// enter
[13, () => {
if (activeOption) {
e.target.value = activeOption.innerHTML;
hiddenField.value = activeOption.getAttribute('value');
e.target.value = activeOption.innerHTML;
if (list.style.display === 'none') {
this.showList(list, activeOption);
list.style.display = 'block';
} else {
this.hideList(list);
list.style.display = 'none';
}
}
e.preventDefault();
}],
// escape
[27, () => {
this.hideList(list);
}]
];
let keyCodeMap = new Map(keyCodeMapVals);
Expand All @@ -60,13 +61,10 @@ export default class controlAutocomplete extends control {
};
const fauxEvents = {
focus: evt => {
const list = evt.target.nextSibling.nextSibling;
const filteredOptions = filter(list.querySelectorAll('li'), evt.target.value);
let list = evt.target.nextSibling.nextSibling;
evt.target.addEventListener('keydown', keyboardNav);
if ( evt.target.value.length > 0 ) {
const selectedOption = filteredOptions.length > 0 ? filteredOptions[filteredOptions.length-1] : null;
this.showList(list, selectedOption);
}
list.style.display = 'block';
list.style.width = list.parentElement.offsetWidth + 'px';
},
blur: evt => {
evt.target.removeEventListener('keydown', keyboardNav);
Expand All @@ -76,24 +74,17 @@ export default class controlAutocomplete extends control {
},
input: (evt) => {
const list = evt.target.nextSibling.nextSibling;
const hiddenField = evt.target.nextSibling;
hiddenField.value = evt.target.value;
const filteredOptions = filter(list.querySelectorAll('li'), evt.target.value);
if (filteredOptions.length == 0) {
this.hideList(list);
filter(list.querySelectorAll('li'), evt.target.value);
if (!evt.target.value) {
list.style.display = 'none';
} else {
let activeOption = this.getActiveOption(list);
if (!activeOption) {
activeOption = filteredOptions[filteredOptions.length - 1];
}
this.showList(list, activeOption);
list.style.display = 'block';
}
}
};
let fauxAttrs = Object.assign({}, data,
{
id: `${data.id}-input`,
autocomplete: 'off',
events: fauxEvents
});
let hiddenAttrs = Object.assign({}, data, {type: 'hidden'});
Expand All @@ -111,8 +102,8 @@ export default class controlAutocomplete extends control {
const list = evt.target.parentElement;
const field = list.previousSibling.previousSibling;
field.value = optionData.label;
field.nextSibling.value = optionData.value;
this.hideList(list);
field.previousSibling.value = optionData.value;
list.style.display = 'none';
}
},
value: optionData.value
Expand All @@ -125,82 +116,6 @@ export default class controlAutocomplete extends control {
return field;
}


/**
* Hides autocomplete list and deselects all the options
* @param {Object} list - list of autocomplete options
*/
hideList(list) {
this.selectOption(list, null);
list.style.display = 'none';
}

/**
* Shows autocomplete list. Automatically selects 'selectedOption'
* @param {Object} list - list of autocomplete options
* @param {Object} selectedOption - option to be selected
*/
showList(list, selectedOption) {
this.selectOption(list, selectedOption);
list.style.display = 'block';
list.style.width = list.parentElement.offsetWidth + 'px';
}

/**
* Returns first option from autocomplete list with 'active-option' class
* @param {Object} list - list of autocomplete options
* @return {Object} first list option with 'active-option' class
*/
getActiveOption(list) {
const activeOption = list.getElementsByClassName('active-option')[0];
if (activeOption && activeOption.style.display !== 'none') {
return activeOption;
}
return null;
}

/**
* Previous next option to the current option
* @param {Object} current - currently selected option
* @return {Object} previous option to the current option or null if previous doesn't exist
*/
getPreviousOption(current) {
let previous = current;
do {
previous = previous ? previous.previousSibling : null;
} while (previous != null && previous.style.display === 'none');
return previous;
}

/**
* Returns next option to the current option
* @param {Object} current - currently selected option
* @return {Object} next option to the current option or null if next doesn't exist
*/
getNextOption(current) {
let next = current;
do {
next = next ? next.nextSibling: null;
} while (next != null && next.style.display === 'none');
return next;
}

/**
* Selects option in autocomplete list. Removes class 'active-option' from all options
* and then adds that class to 'selected' option. If 'selected' is null then no option is selected
* @param {Object} list - list of autocomplete options
* @param {Object} selectedOption - option - 'li' element - to be selected in autocomplete list
*/
selectOption(list, selectedOption) {
const options = list.querySelectorAll('li');
options.forEach((option)=>{
option.classList.remove('active-option');
});
if (selectedOption) {
selectedOption.classList.add('active-option');
}
}

/**
* When the element is rendered into the DOM, execute the following code to initialise it
* @param {Object} evt - event
Expand Down

0 comments on commit 5cfd4cd

Please sign in to comment.