PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-23 20:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #350 from koloml/autocomplete-mouse-selection

Browse source 
Autocomplete: Prevent autocompleted options from selecting when cursor is placed right where popup is created
This commit is contained in:
liamwhite 2024-08-29 13:35:02 -04:00 committed by GitHub
commit 11d8ca0bfd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/js/autocomplete.ts
View file

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