diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Header.js | 10 | ||||
| -rw-r--r-- | src/pages/shop/search.js | 2 |
2 files changed, 10 insertions, 2 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)} diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 92f1bf5a..a8809918 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -21,7 +21,7 @@ export default function ShopSearch({ searchResults, q, page }) { <main> <div className="p-4"> <h1 className="mb-1">Produk</h1> - <div className="text-xs mb-4"> + <div className="text-sm mb-4"> {productFound > 0 ? ( <> Menampilkan |