fix(web): Reset search query and bulk edit when navigating away from the current page

1 files changed, 17 insertions, 3 deletions

diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index 0dd86c50..bab51ff2 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
 
@@ -8,14 +8,28 @@ const SearchInput = React.forwardRef<
   HTMLInputElement,
   React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
 >(({ className, ...props }, ref) => {
-  const { debounceSearch, searchQuery } = useDoBookmarkSearch();
+  const { debounceSearch, searchQuery, isInSearchPage } = useDoBookmarkSearch();
+
+  const [value, setValue] = React.useState(searchQuery);
+
+  useEffect(() => {
+    if (!isInSearchPage) {
+      setValue("");
+    }
+  }, [isInSearchPage]);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    debounceSearch(e.target.value);
+  };
 
   return (
     <Input
       ref={ref}
+      value={value}
+      onChange={onChange}
       placeholder="Search"
       defaultValue={searchQuery}
-      onChange={(e) => debounceSearch(e.target.value)}
       className={className}
       {...props}
     />