feat: close keyboard

src/pages/search.tsx

@@ -1,10 +1,16 @@
-import { useState, useRef, useEffect, ChangeEvent } from "react";
+import debounce from "debounce";
+import {
+  useState,
+  useRef,
+  useEffect,
+  ChangeEvent,
+  KeyboardEventHandler,
+} from "react";
 import { Box } from "@/components/Box";
 import { Heading } from "@/components/Typography";
 import { SearchInput } from "@/components/SearchInput";
 import { StationCardList } from "@/components/StationCardList";
 import { useTranslation } from "@/lib/hooks/useTranslation";
-import debounce from "debounce";
 
 export const Index = () => {
   const { t } = useTranslation();
@@ -14,8 +20,15 @@ export const Index = () => {
   const showList = Q.length >= 3;
   const onChange = (e: ChangeEvent<HTMLInputElement>) => setQ(e.target.value);
   const debouncedOnChange = debounce(onChange, 350);
+  const closeKeyboard: KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === "Enter") {
+      input.current.blur();
+    }
+  };
 
-  useEffect(() => input.current.focus(), []);
+  useEffect(() => {
+    input.current.focus();
+  }, []);
 
   return (
     <Box p={["var(--sz4)"]}>
@@ -24,6 +37,7 @@ export const Index = () => {
       <SearchInput
         ref={input}
         type="search"
+        onKeyPress={closeKeyboard}
         onChange={debouncedOnChange}
         placeholder={t.search.placeholder}
       />