From 1a77cc809a8f598365f284e1f5ae81c8a4c9c377 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 29 Aug 2025 16:14:14 +0530
Subject: [PATCH] The Tenant filter does not close when navigating to another
 component.

---
 src/components/Tenant/TenantFilterPanel.jsx | 76 ++++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/components/Tenant/TenantFilterPanel.jsx b/src/components/Tenant/TenantFilterPanel.jsx
index 97be13b5..8815ff37 100644
--- a/src/components/Tenant/TenantFilterPanel.jsx
+++ b/src/components/Tenant/TenantFilterPanel.jsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState,useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { defaultFilterValues, filterSchema } from "./TenantSchema";
 import Label from "../common/Label";
@@ -8,15 +8,16 @@ import { useIndustries } from "../../hooks/useTenant";
 import { reference, TENANT_STATUS } from "../../utils/constants";
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import moment from "moment";
+import { useLocation } from "react-router-dom";
+
+const TenantFilterPanel = ({ onApply }) => {
+  const [resetKey, setResetKey] = useState(0);
 
-const TenantFilterPanel = ({onApply}) => {
-const [resetKey, setResetKey] = useState(0);
-  
   const methods = useForm({
     resolver: zodResolver(filterSchema),
     defaultValues: defaultFilterValues,
   });
-  
+
   const { handleSubmit, reset } = methods;
   const { data: industries = [], isLoading } = useIndustries();
 
@@ -36,6 +37,13 @@ const [resetKey, setResetKey] = useState(0);
     [onApply, handleClosePanel]
   );
 
+
+  // ✅ Close popup when navigating to another component
+  const location = useLocation();
+  useEffect(() => {
+    handleClosePanel();
+  }, [location]);
+
   const onClear = useCallback(() => {
     reset(defaultFilterValues);
     setResetKey((prev) => prev + 1); // triggers DateRangePicker reset
@@ -48,44 +56,44 @@ const [resetKey, setResetKey] = useState(0);
 
   return (
     <FormProvider {...methods}>
-      <form  onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)}>
         <div className="text-start mb-1">
           <div className="text-start my-2">
-             <DateRangePicker1
-            placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="startDate"
-            endField="endDate"
-            resetSignal={resetKey}
-            defaultRange={false}
-          />
+            <DateRangePicker1
+              placeholder="DD-MM-YYYY To DD-MM-YYYY"
+              startField="startDate"
+              endField="endDate"
+              resetSignal={resetKey}
+              defaultRange={false}
+            />
           </div>
           <div className="text-strat mb-2">
             <SelectMultiple
-            name="industryIds"
-            label="Industries"
-            options={industries}
-            labelKey="name"
-            valueKey="id"
-          />
+              name="industryIds"
+              label="Industries"
+              options={industries}
+              labelKey="name"
+              valueKey="id"
+            />
           </div>
-          
+
           <div className="text-start mb-2">
             <SelectMultiple
-            name="references"
-            label="References"
-            options={reference}
-            labelKey="name"
-            valueKey="val"
-          />
+              name="references"
+              label="References"
+              options={reference}
+              labelKey="name"
+              valueKey="val"
+            />
           </div>
-           <div className="text-start">
+          <div className="text-start">
             <SelectMultiple
-            name="tenantStatusIds"
-            label="Tenant Status"
-            options={TENANT_STATUS}
-            labelKey="name"
-            valueKey="id"
-          />
+              name="tenantStatusIds"
+              label="Tenant Status"
+              options={TENANT_STATUS}
+              labelKey="name"
+              valueKey="id"
+            />
           </div>
           {/* <SelectMultiple
               name="references"
@@ -100,7 +108,7 @@ const [resetKey, setResetKey] = useState(0);
             type="button"
             className="btn btn-secondary btn-xs"
             onClick={onClear}
-            
+
           >
             Clear
           </button>