markmental/ws4kp-linhanced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix autocomplete click-away

Browse source
This commit is contained in:
Matt Walsh 2025-05-15 22:25:18 -05:00
commit 8489b7e2be
No known key found for this signature in database
1 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
server/scripts/modules/autocomplete.mjs
View file

@ -90,7 +90,9 @@ class AutoComplete {
this.elem.addEventListener('keyup', (e) => this.keyUp(e)); this.elem.addEventListener('keyup', (e) => this.keyUp(e));
this.elem.closest('form')?.addEventListener('submit', (e) => this.directFormSubmit(e)); this.elem.closest('form')?.addEventListener('submit', (e) => this.directFormSubmit(e));
this.elem.addEventListener('click', () => this.deselectAll()); this.elem.addEventListener('click', () => this.deselectAll());
this.elem.addEventListener('focusout', () => this.hideSuggestions());
// clicking outside the suggestion box requires a bit of work to determine if suggestions should be hidden
document.addEventListener('click', (e) => this.checkOutsideClick(e));
} }
mouseOver(e) { mouseOver(e) {
@ -138,6 +140,9 @@ class AutoComplete {
// up/down direction // up/down direction
switch (e.which) { switch (e.which) {
case KEYS.ESC:
this.hideSuggestions();
return;
case KEYS.UP: case KEYS.UP:
case KEYS.DOWN: case KEYS.DOWN:
// move up or down the selection list // move up or down the selection list
@ -302,6 +307,13 @@ class AutoComplete {
[...this.results.querySelectorAll('.suggestion.selected')].forEach((elem) => elem.classList.remove('selected')); [...this.results.querySelectorAll('.suggestion.selected')].forEach((elem) => elem.classList.remove('selected'));
this.selectedItem = 0; this.selectedItem = 0;
} }
// if a click is detected on the page, generally we hide the suggestions, unless the click was within the autocomplete elements
checkOutsideClick(e) {
if (e.target.id === 'txtAddress') return;
if (e.target?.parentNode?.classList.contains(this.options.containerClass)) return;
this.hideSuggestions();
}
} }
export default AutoComplete; export default AutoComplete;