mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-01-31 19:36:44 +01:00
Require mouse movement before autocomplete options are selected on hover
This commit is contained in:
parent
073ca2881b
commit
c8bd0c9c33
1 changed files with 18 additions and 0 deletions
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue