feat: select first item after query (#7592)

Now after search is done, the first item will be selected
Unleash · Jul 16, 2024 · 0a4ef3b · 0a4ef3b
1 parent 7ed7173
commit 0a4ef3b
Showing 1 changed file with 13 additions and 0 deletions.
diff --git 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') {