From 2e0d52e30e0249f99a5119f117b947db06ddfd74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 22:00:40 -0500
Subject: [PATCH] feat: enter to select first tank

---
 .../components/TankSearch/index.tsx           | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index b2791f32b..55417901b 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -1,6 +1,7 @@
 import { slateDark } from '@radix-ui/colors';
 import {
   CaretDownIcon,
+  CaretRightIcon,
   MagnifyingGlassIcon,
   TrashIcon,
 } from '@radix-ui/react-icons';
@@ -445,10 +446,34 @@ export function TankSearch({
 
               setSearchedList(results);
             }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                if (
+                  searchResults.length > 0 &&
+                  input.current &&
+                  input.current.value.length > 0
+                ) {
+                  onSelect(searchResults[0]);
+                }
+              }
+            }}
           >
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
             </TextField.Slot>
+
+            {searchResults.length > 0 &&
+              input.current &&
+              input.current.value.length > 0 && (
+                <TextField.Slot>
+                  <Button
+                    variant="ghost"
+                    onClick={() => onSelect(searchResults[0])}
+                  >
+                    {searchResults[0].name} <CaretRightIcon />
+                  </Button>
+                </TextField.Slot>
+              )}
           </TextField.Root>
 
           <DropdownMenu.Root>