From 27bd4e249175c641836ffddf64de0fc19cb0f5e2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 26 Feb 2025 10:35:44 +0100
Subject: [PATCH] feat: allow command bar navigation to wrap around (#9370)

Lets you navigate to the top of the list when you're at the bottom,
and vice versa.

Arrow down at the end of the list takes you to the search field and
arrow up from the search field takes you to the end of the list.
---
 .../src/component/commandBar/CommandBar.tsx   | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 2546fbef83..60bb7fd594 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -257,9 +257,18 @@ export const CommandBar = () => {
             const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
 
             const newIndex = selectedIndex + 1;
-            if (newIndex >= allCommandBarLinks.length) return;
-
-            (allCommandBarLinks[newIndex] as HTMLElement).focus();
+            if (newIndex >= allCommandBarLinks.length) {
+                const element = searchInputRef.current;
+                if (element) {
+                    element.focus();
+                    element.setSelectionRange(
+                        element.value.length,
+                        element.value.length,
+                    );
+                }
+            } else {
+                (allCommandBarLinks[newIndex] as HTMLElement).focus();
+            }
         },
     );
     useKeyboardShortcut(
@@ -276,7 +285,7 @@ export const CommandBar = () => {
 
             if (newIndex >= 0) {
                 (allCommandBarLinks[newIndex] as HTMLElement).focus();
-            } else {
+            } else if (newIndex === -1) {
                 const element = searchInputRef.current;
                 if (element) {
                     element.focus();
@@ -285,6 +294,12 @@ export const CommandBar = () => {
                         element.value.length,
                     );
                 }
+            } else if (newIndex === -2) {
+                (
+                    allCommandBarLinks[
+                        allCommandBarLinks.length - 1
+                    ] as HTMLElement
+                ).focus();
             }
         },
     );