From f1487f45634296d3b3f6aa79f11ac62e34f42774 Mon Sep 17 00:00:00 2001
From: Joris Mancini <joris.mancini_externe@rte-france.com>
Date: Fri, 12 Dec 2025 11:29:42 +0100
Subject: [PATCH] fix(aggrid): debounce in text custom filters

Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>
---
 .../custom-aggrid-comparator-filter.tsx       |  4 +--
 .../custom-aggrid-text-filter.tsx             | 36 ++++++++++++++++---
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx
index 3000c8e4c6..c8ad7fb6b3 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-comparator-filter.tsx
@@ -13,7 +13,6 @@ import { CustomAggridFilterParams } from './custom-aggrid-filter.type';
 
 export const CustomAggridComparatorFilter = ({ api, colId, filterParams }: CustomAggridFilterParams) => {
     const {
-        selectedFilterData,
         selectedFilterComparator,
         decimalAfterDot,
         isNumberInput,
@@ -34,11 +33,12 @@ export const CustomAggridComparatorFilter = ({ api, colId, filterParams }: Custo
                 options={comparators}
             />
             <CustomAggridTextFilter
-                value={selectedFilterData}
+                colId={colId}
                 onChange={handleFilterTextChange}
                 onClear={handleClearFilter}
                 isNumberInput={isNumberInput}
                 decimalAfterDot={decimalAfterDot}
+                filterParams={filterParams}
             />
         </Grid>
     );
diff --git a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
index 7affa80fb9..33b1fb6f81 100644
--- a/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
+++ b/src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-text-filter.tsx
@@ -4,13 +4,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import React, { useMemo } from 'react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
 import { DisplayRounding } from '../display-rounding';
 import { useIntl } from 'react-intl';
 import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { FILTER_DATA_TYPES } from './custom-aggrid-filter.type';
+import { useFilterSelector } from '../../../hooks/use-filter-selector';
+import { FilterParams } from '../../../types/custom-aggrid-types';
 
 const styles = {
     input: {
@@ -28,24 +30,48 @@ const styles = {
 } as const satisfies MuiStyles;
 
 interface CustomAggridTextFilterProps {
-    value: unknown;
+    colId: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onClear: () => void;
     isNumberInput: boolean;
     decimalAfterDot: number;
+    filterParams: FilterParams;
 }
 
 export const CustomAggridTextFilter: React.FC<CustomAggridTextFilterProps> = ({
-    value,
+    colId,
     onChange,
     onClear,
     isNumberInput,
+    filterParams,
     decimalAfterDot = 0,
 }) => {
+    const [value, setValue] = useState('');
     const intl = useIntl();
 
+    const { filters } = useFilterSelector(filterParams.type, filterParams.tab);
+
     const isRoundingDisplayed = useMemo(() => !!(isNumberInput && value), [isNumberInput, value]);
 
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const upperCaseValue = event.target.value.toUpperCase();
+        setValue(upperCaseValue);
+        onChange(event);
+    };
+
+    const handleClear = () => {
+        setValue('');
+        onClear();
+    };
+
+    useEffect(() => {
+        const filterObject = filters?.find((filter) => filter.column === colId);
+        if (filterObject) {
+            setValue(String(filterObject.value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <Grid container direction="column" gap={0.2}>
             <Grid item>
@@ -53,7 +79,7 @@ export const CustomAggridTextFilter: React.FC<CustomAggridTextFilterProps> = ({
                     size={'small'}
                     fullWidth
                     value={value || ''}
-                    onChange={onChange}
+                    onChange={handleChange}
                     placeholder={intl.formatMessage({
                         id: 'filter.filterOoo',
                     })}
@@ -64,7 +90,7 @@ export const CustomAggridTextFilter: React.FC<CustomAggridTextFilterProps> = ({
                     InputProps={{
                         endAdornment: value ? (
                             <InputAdornment position="end">
-                                <IconButton aria-label="clear filter" onClick={onClear} edge="end" size="small">
+                                <IconButton aria-label="clear filter" onClick={handleClear} edge="end" size="small">
                                     <ClearIcon />
                                 </IconButton>
                             </InputAdornment>