From 02a5b35a30845268cfaa814bb045d0ec800dc538 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 12 Oct 2024 13:21:40 +0000
Subject: fix(web): Reset search query and bulk edit when navigating away from
 the current page

---
 apps/web/components/dashboard/search/SearchInput.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'apps/web/components/dashboard/search/SearchInput.tsx')

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}
     />
-- 
cgit v1.2.3-70-g09d2