From 7bb3c60a612b290c29d163edad262e2998dc572f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Oct 2023 16:16:32 -0500
Subject: [PATCH] feat: a little bit of keyboard nav

---
 src/app/tools/session/page.tsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx
index f2fd95dfa..83c471958 100644
--- a/src/app/tools/session/page.tsx
+++ b/src/app/tools/session/page.tsx
@@ -89,7 +89,13 @@ export default function Page() {
               }}
               onBlur={(event) => {
                 // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 is fixed
-                event.target.value.length === 1 && event.target.focus();
+                showSearchResults && event.target.focus();
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  setShowSearchResults(false);
+                  input.current?.blur();
+                }
               }}
               placeholder="Search for a player..."
             />
@@ -106,18 +112,20 @@ export default function Page() {
               ) : searchResults.length === 0 ? (
                 <DropdownMenu.Item disabled>No results</DropdownMenu.Item>
               ) : (
-                searchResults?.map(({ account_id: id, nickname, region }) => (
-                  <DropdownMenu.Item
-                    key={id}
-                    onClick={() => {
-                      setShowSearchResults(false);
-                      setSession(region, id, nickname);
-                    }}
-                    shortcut={REGION_NAMES[region]}
-                  >
-                    {nickname}
-                  </DropdownMenu.Item>
-                ))
+                searchResults?.map(
+                  ({ account_id: id, nickname, region }, index) => (
+                    <DropdownMenu.Item
+                      key={id}
+                      onClick={() => {
+                        setShowSearchResults(false);
+                        setSession(region, id, nickname);
+                      }}
+                      shortcut={REGION_NAMES[region]}
+                    >
+                      {nickname}
+                    </DropdownMenu.Item>
+                  ),
+                )
               )}
             </DropdownMenu.Content>
           </DropdownMenu.Root>