From 0a4ef3b49f86dc610dda88b64a59369a38674a85 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 16 Jul 2024 09:28:34 +0300
Subject: [PATCH] feat: select first item after query (#7592)

Now after search is done, the first item will be selected
---
 frontend/src/component/commandBar/CommandBar.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 25cb4889eaa6..98e1171f0a31 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -171,6 +171,12 @@ export const CommandBar = () => {
         debouncedSetSearchState(value);
     }, [searchedFlagCount]);
 
+    useEffect(() => {
+        if (!searchLoading) {
+            selectFirstItem();
+        }
+    }, [searchLoading, searchString]);
+
     const onSearchChange = (value: string) => {
         debouncedSetSearchState(value);
         setValue(value);
@@ -265,6 +271,13 @@ export const CommandBar = () => {
         },
     );
 
+    const selectFirstItem = () => {
+        const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
+        if (!itemsAndIndex) return;
+        const { allCommandBarLinks } = itemsAndIndex;
+        (allCommandBarLinks[0] as HTMLElement).focus();
+    };
+
     useOnClickOutside([searchContainerRef], hideSuggestions);
     const onKeyDown = (event: React.KeyboardEvent) => {
         if (event.key === 'Escape') {