From 8489b7e2beda03752ca63412a240c751b2ba6f7c Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Thu, 15 May 2025 22:25:18 -0500 Subject: [PATCH] fix autocomplete click-away --- server/scripts/modules/autocomplete.mjs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/server/scripts/modules/autocomplete.mjs b/server/scripts/modules/autocomplete.mjs index b5e84c1..2da116a 100644 --- a/server/scripts/modules/autocomplete.mjs +++ b/server/scripts/modules/autocomplete.mjs @@ -90,7 +90,9 @@ class AutoComplete { this.elem.addEventListener('keyup', (e) => this.keyUp(e)); this.elem.closest('form')?.addEventListener('submit', (e) => this.directFormSubmit(e)); 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) { @@ -138,6 +140,9 @@ class AutoComplete { // up/down direction switch (e.which) { + case KEYS.ESC: + this.hideSuggestions(); + return; case KEYS.UP: case KEYS.DOWN: // 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.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;