fix: blur search field when form submitted

src/components/Form.tsx

@@ -28,13 +28,6 @@ const Form: React.FC<{
     setInputValue(e.currentTarget.value);
   }
 
-  // clear input form and focus on it
-  function onLogoClick(): void {
-    setInputValue('');
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    inputRef.current!.focus();
-  }
-
   // invoke when user clicked one of the suggested items
   function onSuggestionCompleted(name: string): void {
     setInputValue(name);
@@ -44,6 +37,7 @@ const Form: React.FC<{
 
   function onSubmitQuery(e: React.FormEvent) {
     e.preventDefault();
+    (e.target as HTMLFormElement).blur();
     if (!inputValue || inputValue === '') {
       return;
     }
@@ -59,9 +53,11 @@ const Form: React.FC<{
 
   return (
     <InputContainer>
-      <Logo to="/" onClick={onLogoClick}>
+      <InputHeader>
+        <Logo to="/">
           <LogoImage src="/logo.svg" />
         </Logo>
+      </InputHeader>
       <form onSubmit={onSubmitQuery} action="/s" role="search">
         <InputView
           onChange={onInputChange}
@@ -79,6 +75,7 @@ const Form: React.FC<{
 };
 
 export default Form;
+
 const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -96,12 +93,15 @@ const InputContainer = styled.div`
   }
 `;
 
-const Logo = styled(Link)`
+const InputHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 12px;
+  justify-content: center;
-  margin-top: 5px;
+  margin: 12px 0 5px 0;
+`;
+
+const Logo = styled(Link)`
   cursor: pointer;
 
   ${mobile} {

src/components/Suggestion.tsx

@@ -301,8 +301,9 @@ const Item = styled.div<{delay: number}>`
   }
 
   ${mobile} {
-    margin: 10px 0 0;
+    margin: 5px 0 0;
-    font-size: 1.3rem;
+    padding-bottom: 0;
+    font-size: 1rem;
   }
 `;