From c02c5a4d47ee7ee5351ee17326e729017cd604b7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 7 Feb 2025 14:58:05 +0100
Subject: [PATCH] fix(1-3296): don't navigate through the list on tab (#9259)

Prevents tab from navigating you through the list of results. Instead
makes it so that the tab key always takes you to the next item in the
same hierarchy.

As a bonus: also automatically closes the menu when you navigate
away (the previous implementation has a bug where it wouldn't if you
shift-tab).

The behavior of not letting you navigate the list with tab is
consistent with native HTML select elements as well as MUI select
elements. You typically navigate them with the arrow keys.
---
 .../src/component/commandBar/CommandBar.tsx   | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 3659db6709..ced6d07b87 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -288,6 +288,10 @@ export const CommandBar = () => {
         },
     );
 
+    useKeyboardShortcut({ key: 'Tab' }, () => {
+        setShowSuggestions(false);
+    });
+
     useOnClickOutside([searchContainerRef], hideSuggestions);
     const onKeyDown = (event: React.KeyboardEvent) => {
         if (event.key === 'Escape') {
@@ -301,15 +305,6 @@ export const CommandBar = () => {
         }
     };
 
-    const onBlur = (evt: React.FocusEvent) => {
-        if (
-            evt.relatedTarget === null ||
-            !searchContainerRef.current?.contains(evt.relatedTarget)
-        ) {
-            hideSuggestions();
-        }
-    };
-
     return (
         <StyledContainer
             ref={searchContainerRef}
@@ -382,10 +377,7 @@ export const CommandBar = () => {
             <ConditionallyRender
                 condition={Boolean(value) && showSuggestions}
                 show={
-                    <CommandResultsPaper
-                        onKeyDownCapture={onKeyDown}
-                        onBlur={onBlur}
-                    >
+                    <CommandResultsPaper onKeyDownCapture={onKeyDown}>
                         {searchString !== undefined && (
                             <CommandSearchFeatures
                                 searchString={searchString}
@@ -423,10 +415,7 @@ export const CommandBar = () => {
                 }
                 elseShow={
                     showSuggestions && (
-                        <CommandResultsPaper
-                            onKeyDownCapture={onKeyDown}
-                            onBlur={onBlur}
-                        >
+                        <CommandResultsPaper onKeyDownCapture={onKeyDown}>
                             <CommandQuickSuggestions
                                 routes={allRoutes}
                                 onClick={clearSearchValue}