Require mouse movement before autocomplete options are selected on hover

This commit is contained in:
KoloMl 2024-08-29 03:31:43 +04:00
parent 073ca2881b
commit c8bd0c9c33

View file

@ -125,10 +125,17 @@ function createItem(list: HTMLUListElement, suggestion: TermSuggestion) {
className: 'autocomplete__item',
});
let ignoreMouseOver = true;
item.textContent = suggestion.label;
item.dataset.value = suggestion.value;
item.addEventListener('mouseover', () => {
// Prevent selection when mouse entered the element without actually moving.
if (ignoreMouseOver) {
return;
}
removeSelected();
item.classList.add('autocomplete__item--selected');
});
@ -137,6 +144,17 @@ function createItem(list: HTMLUListElement, suggestion: TermSuggestion) {
removeSelected();
});
item.addEventListener(
'mousemove',
() => {
ignoreMouseOver = false;
item.dispatchEvent(new CustomEvent('mouseover'));
},
{
once: true,
},
);
item.addEventListener('click', () => {
if (!inputField || !item.dataset.value) return;