From 5ab3ef774b5ae200ece49a8887bc92c25d748e7e Mon Sep 17 00:00:00 2001
From: Aadniz <8147434+Aadniz@users.noreply.github.com>
Date: Thu, 19 Mar 2026 20:58:48 +0100
Subject: [PATCH] [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.
---
 client/simple/src/js/main/autocomplete.ts | 16 +++++++++++++---
 1 file 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");
+  });
 }