fix: search input value and change handler

src/components/pages/finance/FinanceTable.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import React, {
+import React, { useEffect, useMemo, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
@@ -40,7 +34,6 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import RequirePermission from '@/components/helper/RequirePermission';
 import ButtonFilter from '@/components/helper/ButtonFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
 import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
@@ -177,9 +170,6 @@ const RowOptionsMenu = ({
 };
 
 const FinanceTable = () => {
-  const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
-  const previousPathRef = useRef<string | null>(null);
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -188,7 +178,7 @@ const FinanceTable = () => {
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
     initial: {
-      search: searchValue,
+      search: '',
       transactionTypes: '',
       bankIds: '',
       customerIds: '',
@@ -242,7 +232,7 @@ const FinanceTable = () => {
   // ===== Formik for Filter =====
   const filterFormik = useFormik<FinanceTableFilterValues>({
     initialValues: {
-      search: searchValue,
+      search: tableFilterState.search || '',
       transaction_types: '',
       bank_ids: '',
       customer_ids: '',
@@ -252,17 +242,15 @@ const FinanceTable = () => {
       end_date: '',
     },
     validationSchema: FinanceTableFilterSchema,
-    enableReinitialize: true,
+    onSubmit: (values, { setSubmitting }) => {
-    onSubmit: (values) => {
+      updateFilter('search', values.search, true);
-      updateFilter('search', values.search);
+      updateFilter('transactionTypes', values.transaction_types, true);
-      setSearchValue(values.search);
+      updateFilter('bankIds', values.bank_ids, true);
-      updateFilter('transactionTypes', values.transaction_types);
+      updateFilter('customerIds', values.customer_ids, true);
-      updateFilter('bankIds', values.bank_ids);
+      updateFilter('supplierIds', values.supplier_ids, true);
-      updateFilter('customerIds', values.customer_ids);
+      updateFilter('sortBy', values.sort_by, true);
-      updateFilter('supplierIds', values.supplier_ids);
+      updateFilter('startDate', values.start_date, true);
-      updateFilter('sortBy', values.sort_by);
+      updateFilter('endDate', values.end_date, true);
-      updateFilter('startDate', values.start_date);
-      updateFilter('endDate', values.end_date);
       // Save display names for restoration on modal reopen
       const toNames = (val: OptionType | OptionType[] | null) =>
         val
@@ -270,10 +258,12 @@ const FinanceTable = () => {
               .map((o) => String(o.label))
               .join(',')
           : '';
-      updateFilter('bankNames', toNames(selectedBank));
+      updateFilter('bankNames', toNames(selectedBank), true);
-      updateFilter('customerNames', toNames(selectedCustomerId));
+      updateFilter('customerNames', toNames(selectedCustomerId), true);
-      updateFilter('supplierNames', toNames(selectedSupplierId));
+      updateFilter('supplierNames', toNames(selectedSupplierId), true);
       filterModal.closeModal();
+
+      setSubmitting(false);
     },
     onReset: () => {
       setSelectedTransactionType(null);
@@ -281,18 +271,17 @@ const FinanceTable = () => {
       setSelectedCustomerId(null);
       setSelectedSupplierId(null);
       setSelectedSortBy(null);
-      updateFilter('search', '');
+      updateFilter('search', '', true);
-      resetSearchValue();
+      updateFilter('transactionTypes', '', true);
-      updateFilter('transactionTypes', '');
+      updateFilter('bankIds', '', true);
-      updateFilter('bankIds', '');
+      updateFilter('customerIds', '', true);
-      updateFilter('customerIds', '');
+      updateFilter('supplierIds', '', true);
-      updateFilter('supplierIds', '');
+      updateFilter('sortBy', '', true);
-      updateFilter('sortBy', '');
+      updateFilter('startDate', '', true);
-      updateFilter('startDate', '');
+      updateFilter('endDate', '', true);
-      updateFilter('endDate', '');
+      updateFilter('bankNames', '', true);
-      updateFilter('bankNames', '');
+      updateFilter('customerNames', '', true);
-      updateFilter('customerNames', '');
+      updateFilter('supplierNames', '', true);
-      updateFilter('supplierNames', '');
       filterModal.closeModal();
     },
   });
@@ -347,14 +336,9 @@ const FinanceTable = () => {
   }, [bankOptions, bankRawData]);
 
   // ===== Handler =====
-  const searchChangeHandler = useCallback(
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value, true);
-      updateFilter('search', e.target.value);
+  };
-      setSearchValue(e.target.value);
-      setPage(1);
-    },
-    [updateFilter, setSearchValue, setPage]
-  );
 
   const transactionTypeChangeHandler = (
     val: OptionType | OptionType[] | null
@@ -656,27 +640,6 @@ const FinanceTable = () => {
     };
   }, [dateErrorShown]);
 
-  useEffect(() => {
-    previousPathRef.current = window.location.pathname;
-
-    return () => {
-      const currentPath = window.location.pathname;
-
-      const isCurrentPathFinance = currentPath.includes('/finance');
-      const isPreviousPathFinance =
-        previousPathRef.current?.includes('/finance');
-
-      if (isPreviousPathFinance && !isCurrentPathFinance) {
-        resetSearchValue();
-      }
-
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
-    };
-  }, [resetSearchValue, dateErrorShown]);
-
   return (
     <>
       <div className='w-full'>