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

3 files changed, 29 insertions, 6 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}
     />
diff --git a/apps/web/lib/hooks/bookmark-search.ts b/apps/web/lib/hooks/bookmark-search.ts
index 8514deb6..ffdf402d 100644
--- a/apps/web/lib/hooks/bookmark-search.ts
+++ b/apps/web/lib/hooks/bookmark-search.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 
@@ -13,6 +13,7 @@ export function useDoBookmarkSearch() {
   const router = useRouter();
   const { searchQuery } = useSearchQuery();
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | undefined>();
+  const pathname = usePathname();
 
   useEffect(() => {
     return () => {
@@ -42,6 +43,7 @@ export function useDoBookmarkSearch() {
     doSearch,
     debounceSearch,
     searchQuery,
+    isInSearchPage: pathname.startsWith("/dashboard/search"),
   };
 }