feat(app): Search on enter (#1184)

* Update SearchBox.tsx * fix type var --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Joe Karow <[email protected]>
weareinreach · Mar 25, 2024 · 70013b8 · 70013b8
1 parent b369351
commit 70013b8
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/ui/components/core/SearchBox.tsx b/packages/ui/components/core/SearchBox.tsx
@@ -19,6 +19,7 @@ import { Trans, useTranslation } from 'next-i18next'
 import {
 	type Dispatch,
 	forwardRef,
+	type KeyboardEventHandler,
 	type ReactNode,
 	type SetStateAction,
 	useDebugValue,
@@ -349,6 +350,15 @@ export const SearchBox = ({
 		}
 	}
 
+	const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+		if (event.key === 'Enter') {
+			const topItem = results[0]
+			if (topItem) {
+				selectionHandler(topItem)
+			}
+		}
+	}
+
 	return (
 		<Autocomplete
 			classNames={{
@@ -364,6 +374,7 @@ export const SearchBox = ({
 			dropdownPosition='bottom'
 			radius='xl'
 			onItemSubmit={selectionHandler}
+			onKeyDown={handleKeyDown}
 			disabled={isLoading}
 			label={label}
 			withinPortal