The Tenant filter does not close when navigating to another component.

This commit is contained in:
Kartik Sharma 2025-08-29 16:14:14 +05:30
parent 9dddba4e30
commit 34282f2f3b

View File

@ -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>