fix(aggrid): debounce in text custom filters

Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>

Author: TheMaskedTurtle

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>
     );

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 React, { ChangeEvent, useEffect, useMemo } 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,32 +30,56 @@ 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] = React.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>
                 <TextField
                     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>