From c8bd0c9c33f3b667fb2b1108c27b13b5a86cef5b Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Thu, 29 Aug 2024 03:31:43 +0400
Subject: [PATCH] Require mouse movement before autocomplete options are
 selected on hover

---
 assets/js/autocomplete.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/assets/js/autocomplete.ts b/assets/js/autocomplete.ts
index 21fd50dd..26797685 100644
--- a/assets/js/autocomplete.ts
+++ b/assets/js/autocomplete.ts
@@ -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;