From 85096ba3c6ed7e4931fcf624c6281006f1da3f89 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Tue, 2 Jul 2024 09:56:25 +0200
Subject: [PATCH] feat: command bar results key down should exit/refocus input
 (#7509)

Refocuses command bar input field if command bar results has focus and
user starts to type. Closes if Escape button clicked
---
 frontend/src/component/commandBar/CommandBar.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index e2819bfcb3..7c829294f7 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -194,13 +194,18 @@ export const CommandBar = () => {
         },
     );
     useKeyboardShortcut({ key: 'Escape' }, () => {
-        if (searchContainerRef.current?.contains(document.activeElement)) {
-            searchInputRef.current?.blur();
-        }
+        setShowSuggestions(false);
     });
     const placeholder = `Command bar (${hotkey})`;
 
     useOnClickOutside([searchContainerRef], hideSuggestions);
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Escape') {
+            setShowSuggestions(false);
+        } else if (event.keyCode >= 48 && event.keyCode <= 110) {
+            searchInputRef.current?.focus();
+        }
+    };
     return (
         <StyledContainer ref={searchContainerRef} active={showSuggestions}>
             <RecentlyVisitedRecorder />
@@ -252,7 +257,7 @@ export const CommandBar = () => {
             <ConditionallyRender
                 condition={Boolean(value) && showSuggestions}
                 show={
-                    <CommandResultsPaper>
+                    <CommandResultsPaper onKeyDownCapture={onKeyDown}>
                         {searchString !== undefined && (
                             <CommandFeatures
                                 searchString={searchString}
@@ -277,7 +282,7 @@ export const CommandBar = () => {
                 }
                 elseShow={
                     showSuggestions && (
-                        <CommandResultsPaper>
+                        <CommandResultsPaper onKeyDownCapture={onKeyDown}>
                             <CommandRecent routes={allRoutes} />
                             <CommandPageSuggestions routes={allRoutes} />
                         </CommandResultsPaper>