Close autocomplete window when selection moved outside active term by click

This commit is contained in:
KoloMl 2024-05-30 01:37:35 +04:00
parent f31fcf86b3
commit f1aec2fd58

View file

@ -66,6 +66,13 @@ function changeSelected(firstOrLast, current, sibling) {
} }
} }
function isSelectionOutsideCurrentTerm() {
const selectionIndex = Math.min(inputField.selectionStart, inputField.selectionEnd);
const [startIndex, endIndex] = selectedTerm[0];
return startIndex > selectionIndex || endIndex < selectionIndex;
}
function keydownHandler(event) { function keydownHandler(event) {
const selected = document.querySelector('.autocomplete__item--selected'), const selected = document.querySelector('.autocomplete__item--selected'),
firstItem = document.querySelector('.autocomplete__item:first-of-type'), firstItem = document.querySelector('.autocomplete__item:first-of-type'),
@ -78,10 +85,7 @@ function keydownHandler(event) {
// Close autocompletion popup when text cursor is outside current tag // Close autocompletion popup when text cursor is outside current tag
if (selectedTerm && firstItem && (event.keyCode === 37 || event.keyCode === 39)) { // ArrowLeft || ArrowRight if (selectedTerm && firstItem && (event.keyCode === 37 || event.keyCode === 39)) { // ArrowLeft || ArrowRight
requestAnimationFrame(() => { requestAnimationFrame(() => {
const selectionIndex = Math.min(inputField.selectionStart, inputField.selectionEnd); if (isSelectionOutsideCurrentTerm()) removeParent();
const [startIndex, endIndex] = selectedTerm[0];
if (startIndex > selectionIndex || endIndex < selectionIndex) removeParent();
}) })
} }
} }
@ -247,6 +251,7 @@ function listenAutocomplete() {
// If there's a click outside the inputField, remove autocomplete // If there's a click outside the inputField, remove autocomplete
document.addEventListener('click', event => { document.addEventListener('click', event => {
if (event.target && event.target !== inputField) removeParent(); if (event.target && event.target !== inputField) removeParent();
if (event.target === inputField && isSearchField() && isSelectionOutsideCurrentTerm()) removeParent();
}); });
function fetchLocalAutocomplete(event) { function fetchLocalAutocomplete(event) {