fix: clear search on reset

Author: alexgoff

components/molecules/Search/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { FC, FormEventHandler, useId } from "react";
+import { FC, FormEventHandler, useEffect, useId, useRef } from "react";
 import classNames from "classnames";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslation } from "react-i18next";
@@ -16,9 +16,16 @@ const Search: FC<SearchProps> = ({ className }) => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const { t } = useTranslation();
+  const formRef = useRef<HTMLFormElement>(null);
 
   const searchText = searchParams?.get("search") || "";
 
+  useEffect(() => {
+    if (searchText === "") {
+      formRef?.current?.reset();
+    }
+  }, [searchText]);
+
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
     const search = new FormData(event.target as HTMLFormElement).get("search");
@@ -56,6 +63,7 @@ const Search: FC<SearchProps> = ({ className }) => {
 
   return (
     <form
+      ref={formRef}
       onSubmit={handleSubmit}
       className={classNames(styles.searchFieldset, className)}
     >