From f31fcf86b363eb0bf51dcd7e446bd829ca10751f Mon Sep 17 00:00:00 2001 From: KoloMl Date: Thu, 30 May 2024 00:32:03 +0400 Subject: [PATCH] Close the autocomplete window once user moved outside current term --- assets/js/autocomplete.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/assets/js/autocomplete.js b/assets/js/autocomplete.js index 4d15b860..4a6862ef 100644 --- a/assets/js/autocomplete.js +++ b/assets/js/autocomplete.js @@ -71,8 +71,20 @@ function keydownHandler(event) { firstItem = document.querySelector('.autocomplete__item:first-of-type'), lastItem = document.querySelector('.autocomplete__item:last-of-type'); - // Prevent submission of the search field when Enter was hit - if (event.keyCode === 13 && isSearchField() && selected) event.preventDefault(); // Enter + if (isSearchField()) { + // Prevent submission of the search field when Enter was hit + if (selected && event.keyCode === 13) event.preventDefault(); // Enter + + // Close autocompletion popup when text cursor is outside current tag + if (selectedTerm && firstItem && (event.keyCode === 37 || event.keyCode === 39)) { // ArrowLeft || ArrowRight + requestAnimationFrame(() => { + const selectionIndex = Math.min(inputField.selectionStart, inputField.selectionEnd); + const [startIndex, endIndex] = selectedTerm[0]; + + if (startIndex > selectionIndex || endIndex < selectionIndex) removeParent(); + }) + } + } if (event.keyCode === 38) changeSelected(lastItem, selected, selected && selected.previousSibling); // ArrowUp if (event.keyCode === 40) changeSelected(firstItem, selected, selected && selected.nextSibling); // ArrowDown