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

2 files changed, 26 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/BulkBookmarksAction.tsx b/apps/web/components/dashboard/BulkBookmarksAction.tsx
index 39e13940..c78b65db 100644
--- a/apps/web/components/dashboard/BulkBookmarksAction.tsx
+++ b/apps/web/components/dashboard/BulkBookmarksAction.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import {
   ActionButton,
   ActionButtonWithTooltip,
@@ -47,10 +48,16 @@ export default function BulkBookmarksAction() {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [manageListsModal, setManageListsModalOpen] = useState(false);
   const [bulkTagModal, setBulkTagModalOpen] = useState(false);
+  const pathname = usePathname();
+  const [currentPathname, setCurrentPathname] = useState("");
 
+  // Reset bulk edit state when the route changes
   useEffect(() => {
-    setIsBulkEditEnabled(false); // turn off toggle + clear selected bookmarks on mount
-  }, []);
+    if (pathname !== currentPathname) {
+      setCurrentPathname(pathname);
+      setIsBulkEditEnabled(false);
+    }
+  }, [pathname, currentPathname]);
 
   const onError = () => {
     toast({
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}
     />