I'm attempting to utilize router.push() to modify the URL when the Search button is clicked. However, I've encountered a situation where this function only works sporadically. Ideally, after clicking the button, the user should be directed to the /search page with the text input from the field, but this desired behavior isn't consistently happening and I can't identify any errors in my code.
This is the search function in my index.js:
const [searchInput, setSearchInput] = useState("");
const router = useRouter()
const Search = () => {
router.push({
pathname: "/search",
query: {
city: searchInput,
}
},
);
};
And here's my form in index.js:
<form className={"flex flex-col items-center mt-44 flex-grow"}>
<h1 className={"flex justify-center font-bold pt-20 text-4xl"}>Enter address</h1>
<div className={"flex w-full mt-5 hover:shadow-lg focus-within:shadow-lg max-w-md rounded-full border border-gray-200 px-5 py-3 items-center sm:max-w-xl lg:max-w-2xl"}>
<input
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
type={"text"} className={"flex-grow focus:outline-none"}/>
<SearchIcon className={"h-5 text-gray-500"}/>
</div>
<div className={"flex flex-col w-1/2 space-y-2 justify-center mt-8 sm:space-y-0 sm:flex-row sm:space-x-4"}>
<button
onClick={Search}
className={"btn"}>Search</button>
</div>
</form>
There might be something off with my WebStorm setup since the functionality seems inconsistent. I'm at a loss for what could be causing this issue.