[feat] client/simple: show/hide autocomplete list on focus/blur

The autocomplete suggestion list is currently a bit hard to close if it has been spawned once. Sometimes you may write something in the input field, change your mind and then want to click the first result on the page. But since the dropdown cannot be closed, the dropdown is in the way to be able to click on the first result.

1 files changed, 13 insertions, 3 deletions

diff --git a/client/simple/src/js/main/autocomplete.ts b/client/simple/src/js/main/autocomplete.ts
index 7da197ddf..aea67c75d 100644
--- a/client/simple/src/js/main/autocomplete.ts
+++ b/client/simple/src/js/main/autocomplete.ts
@@ -44,8 +44,6 @@ const fetchResults = async (qInput: HTMLInputElement, query: string): Promise<vo
 
         const form = document.querySelector<HTMLFormElement>("#search");
         form?.submit();
-
-        autocomplete.classList.remove("open");
       });
 
       fragment.append(li);
@@ -80,6 +78,11 @@ listen("input", qInput, () => {
 const autocomplete: HTMLElement | null = document.querySelector<HTMLElement>(".autocomplete");
 const autocompleteList: HTMLUListElement | null = document.querySelector<HTMLUListElement>(".autocomplete ul");
 if (autocompleteList) {
+  listen("keydown", qInput, (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      autocomplete?.classList.remove("open");
+    }
+  });
   listen("keyup", qInput, (event: KeyboardEvent) => {
     const listItems = [...autocompleteList.children] as HTMLElement[];
 
@@ -105,7 +108,6 @@ if (autocompleteList) {
         newCurrentIndex = (currentIndex + 1) % listItems.length;
         break;
       }
-      case "Tab":
       case "Enter":
         if (autocomplete) {
           autocomplete.classList.remove("open");
@@ -129,4 +131,12 @@ if (autocompleteList) {
       }
     }
   });
+
+  listen("blur", qInput, () => {
+    autocomplete?.classList.remove("open");
+  });
+
+  listen("focus", qInput, () => {
+    autocomplete?.classList.add("open");
+  });
 }