Blur input search on query changed

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index f7607a18..337483bb 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,7 +4,7 @@ import ShoppingCartIcon from "../icons/shopping-cart.svg";
 import SearchIcon from "../icons/search.svg";
 import MenuIcon from "../icons/menu.svg";
 import ChevronRightIcon from "../icons/chevron-right.svg";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import Logo from "../images/logo.png";
 import { useRouter } from "next/router";
@@ -14,8 +14,15 @@ export default function Header({ title }) {
   const router = useRouter();
   const { q = '' } = router.query;
   const [searchQuery, setSearchQuery] = useState(q);
+  const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
 
+  useEffect(() => {
+    if (q) {
+      searchQueryRef.current.blur();
+    }
+  }, [q])
+
   const openMenu = () => setIsMenuActive(true);
   const closeMenu = () => setIsMenuActive(false);
 
@@ -74,6 +81,7 @@ export default function Header({ title }) {
         </div>
         <form onSubmit={searchSubmit} className="flex mt-2">
             <input 
+              ref={searchQueryRef}
               type="text" 
               name="q" 
               onChange={(e) => setSearchQuery(e.target.value)}