From cee0f3f05cb6ad997145832faf96cf789d72be68 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Mon, 20 Jan 2025 14:50:42 +0100
Subject: [PATCH 01/16] Improve GUI Criteria Filter : PlaceHolder Ok

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../inputs/reactQueryBuilder/PropertyValueEditor.tsx  | 11 ++++++++++-
 src/translations/en/filterExpertEn.ts                 |  1 +
 src/translations/fr/filterExpertFr.ts                 |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index eddf6cf3..4da204dd 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -109,7 +109,16 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     options={predefinedValues ?? []}
                     title={valueEditorProps?.title}
                     multiple
-                    renderInput={(params) => <TextField {...params} error={!valid} />}
+                    renderInput={(params) => {
+                        console.log('[FieldConstants.PROPERTY_VALUES] : ', [FieldConstants.PROPERTY_VALUES]);
+                        return (
+                            <TextField
+                                {...params}
+                                error={!valid}
+                                placeholder={valid ? '' : intl.formatMessage({ id: 'valuesList' })}
+                            />
+                        );
+                    }}
                     freeSolo
                     autoSelect
                     onChange={(event, value: any) => {
diff --git a/src/translations/en/filterExpertEn.ts b/src/translations/en/filterExpertEn.ts
index 8e5afcf5..9bba0506 100644
--- a/src/translations/en/filterExpertEn.ts
+++ b/src/translations/en/filterExpertEn.ts
@@ -189,4 +189,5 @@ export const filterExpertEn = {
         'The operator will be changed and will be applied to all the rules already created in the group.',
     lowShortCircuitCurrentLimit: 'Low short-circuit current limit',
     highShortCircuitCurrentLimit: 'High short-circuit current limit',
+    valuesList: 'Values list',
 };
diff --git a/src/translations/fr/filterExpertFr.ts b/src/translations/fr/filterExpertFr.ts
index 1e4c5d49..df07dcb7 100644
--- a/src/translations/fr/filterExpertFr.ts
+++ b/src/translations/fr/filterExpertFr.ts
@@ -188,4 +188,5 @@ export const filterExpertFr = {
     changeOperatorMessage: "L'opérateur sera modifié et s'appliquera sur toutes les règles déjà créées dans le groupe.",
     lowShortCircuitCurrentLimit: 'Limite ICC min',
     highShortCircuitCurrentLimit: 'Limite ICC max',
+    valuesList: 'Liste de valeurs',
 };

From 71ecf9944d70cbf726ea539eab4b964bab79aeda Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Mon, 20 Jan 2025 16:01:38 +0100
Subject: [PATCH 02/16] Improve GUI Criteria Filter : Spacing Ok

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../inputs/reactQueryBuilder/PropertyValueEditor.tsx       | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 4da204dd..5387f207 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -71,7 +71,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
     );
 
     return (
-        <Grid container item spacing={1}>
+        <Grid container spacing={1} item>
             <Grid item xs={5}>
                 <Autocomplete
                     value={propertyName ?? ''}
@@ -86,7 +86,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     size="small"
                 />
             </Grid>
-            <Grid item xs={2.5}>
+            <Grid item xs="auto">
                 <Select
                     value={propertyOperator ?? PROPERTY_VALUE_OPERATORS[0].customName}
                     size="small"
@@ -103,14 +103,13 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     ))}
                 </Select>
             </Grid>
-            <Grid item xs={4.5}>
+            <Grid item xs>
                 <Autocomplete
                     value={propertyValues ?? []}
                     options={predefinedValues ?? []}
                     title={valueEditorProps?.title}
                     multiple
                     renderInput={(params) => {
-                        console.log('[FieldConstants.PROPERTY_VALUES] : ', [FieldConstants.PROPERTY_VALUES]);
                         return (
                             <TextField
                                 {...params}

From f294a23fefd6ee9c59612b9f15b24339a6902b89 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 21 Jan 2025 10:50:01 +0100
Subject: [PATCH 03/16] Improve GUI Criteria Filter : rename is part of Ok

---
 src/components/filter/expert/expertFilterConstants.ts | 4 ++--
 src/translations/en/filterEn.ts                       | 4 ++--
 src/translations/fr/filterFr.ts                       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/filter/expert/expertFilterConstants.ts b/src/components/filter/expert/expertFilterConstants.ts
index 8452eeaa..870f4b7e 100644
--- a/src/components/filter/expert/expertFilterConstants.ts
+++ b/src/components/filter/expert/expertFilterConstants.ts
@@ -192,12 +192,12 @@ export const OPERATOR_OPTIONS = {
     IS_PART_OF: {
         name: OperatorType.IS_PART_OF,
         customName: OperatorType.IS_PART_OF,
-        label: 'isPartOf',
+        label: 'inFilter',
     },
     IS_NOT_PART_OF: {
         name: OperatorType.IS_NOT_PART_OF,
         customName: OperatorType.IS_NOT_PART_OF,
-        label: 'isNotPartOf',
+        label: 'notInFilter',
     },
 };
 
diff --git a/src/translations/en/filterEn.ts b/src/translations/en/filterEn.ts
index 25c30ab6..56d8bce8 100644
--- a/src/translations/en/filterEn.ts
+++ b/src/translations/en/filterEn.ts
@@ -18,8 +18,8 @@ export const filterEn = {
     not_exists: 'not exists',
     between: 'between',
     in: 'in',
-    isPartOf: 'is part of',
-    isNotPartOf: 'is not part of',
+    inFilter: 'in filter',
+    notInFilter: 'not in filter',
     emptyRule: 'Filter contains an empty field',
     incorrectRule: 'Filter contains an incorrect field',
     obsoleteFilter: 'This filter is no longer supported. Please remove it or change its equipment type.',
diff --git a/src/translations/fr/filterFr.ts b/src/translations/fr/filterFr.ts
index 51509ed1..56ff0207 100644
--- a/src/translations/fr/filterFr.ts
+++ b/src/translations/fr/filterFr.ts
@@ -18,8 +18,8 @@ export const filterFr = {
     not_exists: "n'existe pas",
     between: 'entre',
     in: 'dans',
-    isPartOf: 'fait partie de',
-    isNotPartOf: 'ne fait pas partie de',
+    inFilter: 'dans le filtre',
+    notInFilter: "n'est pas dans le filtre",
     emptyRule: 'Le filtre contient un champ vide',
     incorrectRule: 'Le filtre contient un champ incorrect',
     obsoleteFilter: "Ce filtre n'est plus supporté. Veuillez le supprimer ou changer son type d'équipement.",

From 2b253f862b445a60a36856e7b24a2b05181c9c3e Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Wed, 22 Jan 2025 13:57:05 +0100
Subject: [PATCH 04/16] when only one element select like components have the
 appearance of TextField

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../inputs/reactQueryBuilder/FieldSelector.tsx     |  4 +++-
 .../reactQueryBuilder/PropertyValueEditor.tsx      |  2 ++
 .../inputs/reactQueryBuilder/ValueSelector.tsx     |  4 +++-
 .../reactQueryBuilder/useSelectAppearance.ts       | 14 ++++++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/inputs/reactQueryBuilder/useSelectAppearance.ts

diff --git a/src/components/inputs/reactQueryBuilder/FieldSelector.tsx b/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
index 6c166ab3..dd26202d 100644
--- a/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
@@ -7,6 +7,7 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
+import { useSelectAppearance } from './useSelectAppearance';
 
 const ITEM_HEIGHT = 32; // default value from React query builder defaultNativeSelectStyles that can't be accessed
 const ITEM_PADDING = 4;
@@ -21,5 +22,6 @@ const MenuProps = {
 };
 
 export function FieldSelector(props: Readonly<ValueSelectorProps>) {
-    return <MaterialValueSelector {...props} MenuProps={MenuProps} />;
+    const { options } = props;
+    return <MaterialValueSelector {...props} MenuProps={MenuProps} {...useSelectAppearance(options.length)} />;
 }
diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 5387f207..1eab57f2 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -16,6 +16,7 @@ import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
 import { EquipmentType } from '../../../utils';
+import { useSelectAppearance } from './useSelectAppearance';
 
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
 
@@ -95,6 +96,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     onChange={(event, value: any) => {
                         onChange(FieldConstants.PROPERTY_OPERATOR, value);
                     }}
+                    {...useSelectAppearance(PROPERTY_VALUE_OPERATORS.length)}
                 >
                     {PROPERTY_VALUE_OPERATORS.map((operator) => (
                         <MenuItem key={operator.customName} value={operator.customName}>
diff --git a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
index 1fca2b90..b6eb3291 100644
--- a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
@@ -7,7 +7,9 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
+import { useSelectAppearance } from './useSelectAppearance';
 
 export function ValueSelector(props: ValueSelectorProps) {
-    return <MaterialValueSelector {...props} />;
+    const { options } = props;
+    return <MaterialValueSelector {...props} {...useSelectAppearance(options.length)} />;
 }
diff --git a/src/components/inputs/reactQueryBuilder/useSelectAppearance.ts b/src/components/inputs/reactQueryBuilder/useSelectAppearance.ts
new file mode 100644
index 00000000..162c1d77
--- /dev/null
+++ b/src/components/inputs/reactQueryBuilder/useSelectAppearance.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/.
+ */
+
+// useSelectAppearance
+export function useSelectAppearance(listLength: number) {
+    if (listLength === 1) {
+        return { IconComponent: () => null, readOnly: true };
+    }
+    return { IconComponent: undefined, readOnly: false };
+}

From c7563f33d12e0705b05eedadd2ec505b4282aaec Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Thu, 23 Jan 2025 10:50:47 +0100
Subject: [PATCH 05/16] continue and improve code for Selects

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../inputs/reactQueryBuilder/CombinatorSelector.tsx       | 4 +++-
 src/components/inputs/reactQueryBuilder/FieldSelector.tsx | 2 +-
 .../inputs/reactQueryBuilder/PropertyValueEditor.tsx      | 8 ++------
 src/components/inputs/reactQueryBuilder/ValueSelector.tsx | 2 +-
 src/hooks/index.ts                                        | 1 +
 .../reactQueryBuilder => hooks}/useSelectAppearance.ts    | 6 +++++-
 6 files changed, 13 insertions(+), 10 deletions(-)
 rename src/{components/inputs/reactQueryBuilder => hooks}/useSelectAppearance.ts (68%)

diff --git a/src/components/inputs/reactQueryBuilder/CombinatorSelector.tsx b/src/components/inputs/reactQueryBuilder/CombinatorSelector.tsx
index ca949556..81f4ff75 100644
--- a/src/components/inputs/reactQueryBuilder/CombinatorSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/CombinatorSelector.tsx
@@ -9,9 +9,10 @@ import { CombinatorSelectorProps } from 'react-querybuilder';
 import { useCallback, useState } from 'react';
 import { MaterialValueSelector } from '@react-querybuilder/material';
 import { PopupConfirmationDialog } from '../../dialogs/popupConfirmationDialog/PopupConfirmationDialog';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 export function CombinatorSelector(props: CombinatorSelectorProps) {
-    const { value, handleOnChange } = props;
+    const { options, value, handleOnChange } = props;
     const [tempCombinator, setTempCombinator] = useState(value);
     const [openPopup, setOpenPopup] = useState(false);
 
@@ -35,6 +36,7 @@ export function CombinatorSelector(props: CombinatorSelectorProps) {
                     setTempCombinator(newCombinator);
                     setOpenPopup(true);
                 }}
+                {...useSelectAppearance(options.length)}
             />
         </>
     );
diff --git a/src/components/inputs/reactQueryBuilder/FieldSelector.tsx b/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
index dd26202d..f23a00e6 100644
--- a/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/FieldSelector.tsx
@@ -7,7 +7,7 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 const ITEM_HEIGHT = 32; // default value from React query builder defaultNativeSelectStyles that can't be accessed
 const ITEM_PADDING = 4;
diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 1eab57f2..627c635c 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -16,7 +16,7 @@ import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
 import { EquipmentType } from '../../../utils';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
 
@@ -113,11 +113,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     multiple
                     renderInput={(params) => {
                         return (
-                            <TextField
-                                {...params}
-                                error={!valid}
-                                placeholder={valid ? '' : intl.formatMessage({ id: 'valuesList' })}
-                            />
+                            <TextField {...params} error={!valid} label={intl.formatMessage({ id: 'valuesList' })} />
                         );
                     }}
                     freeSolo
diff --git a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
index b6eb3291..6ec44428 100644
--- a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
@@ -7,7 +7,7 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 export function ValueSelector(props: ValueSelectorProps) {
     const { options } = props;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 154ad96c..644e6515 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -15,3 +15,4 @@ export * from './usePredefinedProperties';
 export * from './usePrevious';
 export * from './useSnackMessage';
 export * from './useFormatLabelWithUnit';
+export * from './useSelectAppearance';
diff --git a/src/components/inputs/reactQueryBuilder/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
similarity index 68%
rename from src/components/inputs/reactQueryBuilder/useSelectAppearance.ts
rename to src/hooks/useSelectAppearance.ts
index 162c1d77..b365f41d 100644
--- a/src/components/inputs/reactQueryBuilder/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -5,7 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-// useSelectAppearance
+/** Hooks used to modify appearance of Select as a readonly TextField,
+    by hiding display button and setting readOnly prop to true
+    if options list is only one element long.
+    P.S :  Not to used on AutoComplete.
+*/
 export function useSelectAppearance(listLength: number) {
     if (listLength === 1) {
         return { IconComponent: () => null, readOnly: true };

From 92a43cff54025beadb29f794bb80d387322eebf1 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Thu, 23 Jan 2025 12:16:27 +0100
Subject: [PATCH 06/16] placeholder does not depend on RQB

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../inputs/reactQueryBuilder/PropertyValueEditor.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 627c635c..90514fd9 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -111,11 +111,13 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     options={predefinedValues ?? []}
                     title={valueEditorProps?.title}
                     multiple
-                    renderInput={(params) => {
-                        return (
-                            <TextField {...params} error={!valid} label={intl.formatMessage({ id: 'valuesList' })} />
-                        );
-                    }}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            error={!valid}
+                            placeholder={propertyValues?.length > 0 ? '' : intl.formatMessage({ id: 'valuesList' })}
+                        />
+                    )}
                     freeSolo
                     autoSelect
                     onChange={(event, value: any) => {

From 51a90e89202c71567db8b7cb3ee7be73ec270dac Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Thu, 23 Jan 2025 16:44:02 +0100
Subject: [PATCH 07/16] show option in autocomplete when absent from list

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../reactQueryBuilder/PropertyValueEditor.tsx      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 90514fd9..f432871c 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import Grid from '@mui/material/Grid';
-import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
+import { Autocomplete, createFilterOptions, MenuItem, Select, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
 import { useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';
@@ -71,6 +71,8 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
         [valueEditorProps]
     );
 
+    const filter = createFilterOptions<string>();
+
     return (
         <Grid container spacing={1} item>
             <Grid item xs={5}>
@@ -124,6 +126,16 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_VALUES, value);
                     }}
                     size="small"
+                    filterOptions={(options, params) => {
+                        const filtered = filter(options, params);
+                        const { inputValue } = params;
+
+                        const isExisting = options.some((option) => inputValue === option.title);
+                        if (inputValue !== '' && !isExisting) {
+                            filtered.push(inputValue);
+                        }
+                        return filtered;
+                    }}
                 />
             </Grid>
         </Grid>

From 9cfc7d8f628a4f03362632187654549eaae0d851 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Mon, 27 Jan 2025 16:04:30 +0100
Subject: [PATCH 08/16] fix 1 element problems

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../reactQueryBuilder/PropertyValueEditor.tsx | 35 ++++++++++++-------
 .../inputs/reactQueryBuilder/RemoveButton.tsx | 22 ++++++++++--
 .../reactQueryBuilder/ValueSelector.tsx       |  2 +-
 src/hooks/useSelectAppearance.ts              | 14 ++++++--
 4 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index f432871c..8426ac9e 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import Grid from '@mui/material/Grid';
-import { Autocomplete, createFilterOptions, MenuItem, Select, TextField } from '@mui/material';
+import { Autocomplete, createFilterOptions, FilterOptionsState, MenuItem, Select, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
 import { useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';
@@ -71,7 +71,26 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
         [valueEditorProps]
     );
 
-    const filter = createFilterOptions<string>();
+    const filter = useMemo(() => {
+        return createFilterOptions<string>();
+    }, []);
+
+    const filterList = useCallback(
+        (options: string[], params: FilterOptionsState<string>) => {
+            let filtered = filter(options, params);
+            const { inputValue } = params;
+
+            const isExisting = options.some((option) => inputValue === option);
+            if (isExisting && options.length === 1 && options[0] === inputValue) {
+                // exact match : nothing to show
+                filtered = [];
+            } else if (inputValue !== '' && !isExisting) {
+                filtered.push(inputValue);
+            }
+            return filtered;
+        },
+        [filter]
+    );
 
     return (
         <Grid container spacing={1} item>
@@ -87,6 +106,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_NAME, value);
                     }}
                     size="small"
+                    filterOptions={(options, params) => filterList(options, params)}
                 />
             </Grid>
             <Grid item xs="auto">
@@ -126,16 +146,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_VALUES, value);
                     }}
                     size="small"
-                    filterOptions={(options, params) => {
-                        const filtered = filter(options, params);
-                        const { inputValue } = params;
-
-                        const isExisting = options.some((option) => inputValue === option.title);
-                        if (inputValue !== '' && !isExisting) {
-                            filtered.push(inputValue);
-                        }
-                        return filtered;
-                    }}
+                    filterOptions={(options, params) => filterList(options, params)}
                 />
             </Grid>
         </Grid>
diff --git a/src/components/inputs/reactQueryBuilder/RemoveButton.tsx b/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
index e7b16f0c..a456ce60 100644
--- a/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
+++ b/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
@@ -10,6 +10,7 @@ import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useController } from 'react-hook-form';
 
+import { useState } from 'react';
 import { recursiveRemove } from '../../filter/expert/expertFilterUtils';
 
 const EXPERT_FILTER_QUERY = 'rules';
@@ -20,15 +21,32 @@ export function RemoveButton(props: ActionWithRulesProps) {
         field: { value: query, onChange },
     } = useController({ name: EXPERT_FILTER_QUERY });
 
+    const [visible, setVisible] = useState(false);
+
     function handleDelete() {
         // We don't want groups with no rules
         // So if we have only empty subgroups above the removed rule, we want to remove all of them
         onChange(recursiveRemove(query, path));
     }
 
+    function handleOnMouseOver() {
+        setVisible(true);
+    }
+
+    function handleOnMouseOut() {
+        setVisible(false);
+    }
+
     return (
-        <IconButton size="small" onClick={() => handleDelete()} className={className} title={title}>
-            <DeleteIcon />
+        <IconButton
+            size="small"
+            onClick={() => handleDelete()}
+            className={className}
+            title={title}
+            onMouseOver={() => handleOnMouseOver()}
+            onMouseOut={() => handleOnMouseOut()}
+        >
+            <DeleteIcon visibility={visible ? 'visible' : 'hidden'} />
         </IconButton>
     );
 }
diff --git a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
index 6ec44428..9b8f0032 100644
--- a/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
+++ b/src/components/inputs/reactQueryBuilder/ValueSelector.tsx
@@ -11,5 +11,5 @@ import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 export function ValueSelector(props: ValueSelectorProps) {
     const { options } = props;
-    return <MaterialValueSelector {...props} {...useSelectAppearance(options.length)} />;
+    return <MaterialValueSelector {...props} {...useSelectAppearance(options.length)} sx={{ border: 'none' }} />;
 }
diff --git a/src/hooks/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
index b365f41d..d794d2e8 100644
--- a/src/hooks/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -12,7 +12,17 @@
 */
 export function useSelectAppearance(listLength: number) {
     if (listLength === 1) {
-        return { IconComponent: () => null, readOnly: true };
+        return {
+            IconComponent: () => null,
+            sx: {
+                boxShadow: 'none',
+                '.MuiOutlinedInput-notchedOutline': { border: 'none' },
+                pointerEvents: 'none',
+                border: 'none',
+            },
+            readOnly: true,
+            disableUnderline: true,
+        };
     }
-    return { IconComponent: undefined, readOnly: false };
+    return { IconComponent: undefined };
 }

From 32be813898522fa2b905eb399a77a11c19d72b04 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Mon, 27 Jan 2025 17:47:09 +0100
Subject: [PATCH 09/16] fix remove buttons

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../filter/expert/stylesExpertFilter.css      |  9 +++++++-
 .../inputs/reactQueryBuilder/RemoveButton.tsx | 22 ++-----------------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/components/filter/expert/stylesExpertFilter.css b/src/components/filter/expert/stylesExpertFilter.css
index d0630750..13b1cd9a 100644
--- a/src/components/filter/expert/stylesExpertFilter.css
+++ b/src/components/filter/expert/stylesExpertFilter.css
@@ -95,6 +95,14 @@
     display: none;
 }
 
+.queryBuilder-branches .rule:hover .rule-remove {
+    visibility: visible;
+}
+
+.queryBuilder-branches .rule .rule-remove {
+    visibility: hidden;
+}
+
 .queryBuilder-branches .ruleGroup .ruleGroup::before,
 .queryBuilder-branches .ruleGroup .ruleGroup::after {
     left: calc(calc(-0.5rem - 1px) - 1px);
@@ -110,7 +118,6 @@
 }
 
 /* Justify layout */
-.queryBuilder .ruleGroup-remove,
 .queryBuilder .rule-remove {
     margin-left: auto;
 }
diff --git a/src/components/inputs/reactQueryBuilder/RemoveButton.tsx b/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
index a456ce60..e7b16f0c 100644
--- a/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
+++ b/src/components/inputs/reactQueryBuilder/RemoveButton.tsx
@@ -10,7 +10,6 @@ import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useController } from 'react-hook-form';
 
-import { useState } from 'react';
 import { recursiveRemove } from '../../filter/expert/expertFilterUtils';
 
 const EXPERT_FILTER_QUERY = 'rules';
@@ -21,32 +20,15 @@ export function RemoveButton(props: ActionWithRulesProps) {
         field: { value: query, onChange },
     } = useController({ name: EXPERT_FILTER_QUERY });
 
-    const [visible, setVisible] = useState(false);
-
     function handleDelete() {
         // We don't want groups with no rules
         // So if we have only empty subgroups above the removed rule, we want to remove all of them
         onChange(recursiveRemove(query, path));
     }
 
-    function handleOnMouseOver() {
-        setVisible(true);
-    }
-
-    function handleOnMouseOut() {
-        setVisible(false);
-    }
-
     return (
-        <IconButton
-            size="small"
-            onClick={() => handleDelete()}
-            className={className}
-            title={title}
-            onMouseOver={() => handleOnMouseOver()}
-            onMouseOut={() => handleOnMouseOut()}
-        >
-            <DeleteIcon visibility={visible ? 'visible' : 'hidden'} />
+        <IconButton size="small" onClick={() => handleDelete()} className={className} title={title}>
+            <DeleteIcon />
         </IconButton>
     );
 }

From a1e8555d65146a59e4a9ee7f1a3e53da7c3c5ee0 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 28 Jan 2025 17:38:09 +0100
Subject: [PATCH 10/16] Update src/hooks/useSelectAppearance.ts

Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
---
 src/hooks/useSelectAppearance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
index d794d2e8..b95fa4e1 100644
--- a/src/hooks/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -8,7 +8,7 @@
 /** Hooks used to modify appearance of Select as a readonly TextField,
     by hiding display button and setting readOnly prop to true
     if options list is only one element long.
-    P.S :  Not to used on AutoComplete.
+    P.S :  Do not use on AutoComplete.
 */
 export function useSelectAppearance(listLength: number) {
     if (listLength === 1) {

From 669ce4821a217a51ff23ababff5c6c791170fd34 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 28 Jan 2025 17:38:27 +0100
Subject: [PATCH 11/16] Update src/hooks/useSelectAppearance.ts

Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
---
 src/hooks/useSelectAppearance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
index b95fa4e1..181d43ef 100644
--- a/src/hooks/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-/** Hooks used to modify appearance of Select as a readonly TextField,
+/** Hook used to modify the appearance of Select into a readonly TextField,
     by hiding display button and setting readOnly prop to true
     if options list is only one element long.
     P.S :  Do not use on AutoComplete.

From 7cfd5f8630929b8f1dc7391d132116dbad356fdf Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 28 Jan 2025 17:40:13 +0100
Subject: [PATCH 12/16] Update src/hooks/useSelectAppearance.ts

Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
---
 src/hooks/useSelectAppearance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
index 181d43ef..5d22c6f2 100644
--- a/src/hooks/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -24,5 +24,5 @@ export function useSelectAppearance(listLength: number) {
             disableUnderline: true,
         };
     }
-    return { IconComponent: undefined };
+    return {};
 }

From 6c0eb1c6d9b30da97f4c3dc8048ce3032ac63fe2 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 28 Jan 2025 17:40:50 +0100
Subject: [PATCH 13/16] Update src/translations/fr/filterFr.ts

Co-authored-by: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com>
---
 src/translations/fr/filterFr.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/translations/fr/filterFr.ts b/src/translations/fr/filterFr.ts
index 56ff0207..556e4c57 100644
--- a/src/translations/fr/filterFr.ts
+++ b/src/translations/fr/filterFr.ts
@@ -19,7 +19,7 @@ export const filterFr = {
     between: 'entre',
     in: 'dans',
     inFilter: 'dans le filtre',
-    notInFilter: "n'est pas dans le filtre",
+    notInFilter: "pas dans le filtre",
     emptyRule: 'Le filtre contient un champ vide',
     incorrectRule: 'Le filtre contient un champ incorrect',
     obsoleteFilter: "Ce filtre n'est plus supporté. Veuillez le supprimer ou changer son type d'équipement.",

From f60924305f4e5c6cb30a8a4e90c9e7011126cca4 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Tue, 28 Jan 2025 17:48:08 +0100
Subject: [PATCH 14/16] fix issue Eslint

---
 src/translations/fr/filterFr.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/translations/fr/filterFr.ts b/src/translations/fr/filterFr.ts
index 556e4c57..609da77a 100644
--- a/src/translations/fr/filterFr.ts
+++ b/src/translations/fr/filterFr.ts
@@ -19,7 +19,7 @@ export const filterFr = {
     between: 'entre',
     in: 'dans',
     inFilter: 'dans le filtre',
-    notInFilter: "pas dans le filtre",
+    notInFilter: 'pas dans le filtre',
     emptyRule: 'Le filtre contient un champ vide',
     incorrectRule: 'Le filtre contient un champ incorrect',
     obsoleteFilter: "Ce filtre n'est plus supporté. Veuillez le supprimer ou changer son type d'équipement.",

From b30b0faef7b72049814aaabd752c6324397a9c08 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Thu, 30 Jan 2025 10:31:39 +0100
Subject: [PATCH 15/16] review

Signed-off-by: basseche <bassel.el-cheikh_externe@rte-france.com>
---
 .../reactQueryBuilder/PropertyValueEditor.tsx | 38 +++++++++----------
 src/hooks/useSelectAppearance.ts              | 32 +++++++++-------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index 6800b4c4..e0b393a7 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -71,26 +71,22 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
         [valueEditorProps]
     );
 
-    const filter = useMemo(() => {
-        return createFilterOptions<string>();
-    }, []);
+    const filterOptions = useCallback((options: string[], params: FilterOptionsState<string>) => {
+        const filter = createFilterOptions<string>();
+        const filteredOptions = filter(options, params);
+        const { inputValue } = params;
+
+        const isExisting = options.some((option) => inputValue === option);
+        if (isExisting && options.length === 1 && options[0] === inputValue) {
+            // exact match : nothing to show
+            return [];
+        }
 
-    const filterList = useCallback(
-        (options: string[], params: FilterOptionsState<string>) => {
-            let filtered = filter(options, params);
-            const { inputValue } = params;
-
-            const isExisting = options.some((option) => inputValue === option);
-            if (isExisting && options.length === 1 && options[0] === inputValue) {
-                // exact match : nothing to show
-                filtered = [];
-            } else if (inputValue !== '' && !isExisting) {
-                filtered.push(inputValue);
-            }
-            return filtered;
-        },
-        [filter]
-    );
+        if (inputValue !== '' && !isExisting) {
+            filteredOptions.push(inputValue);
+        }
+        return filteredOptions;
+    }, []);
 
     return (
         <Grid container spacing={1} item>
@@ -106,7 +102,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_NAME, value);
                     }}
                     size="small"
-                    filterOptions={(options, params) => filterList(options, params)}
+                    filterOptions={filterOptions}
                 />
             </Grid>
             <Grid item xs="auto">
@@ -146,7 +142,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_VALUES, value);
                     }}
                     size="small"
-                    filterOptions={(options, params) => filterList(options, params)}
+                    filterOptions={filterOptions}
                 />
             </Grid>
         </Grid>
diff --git a/src/hooks/useSelectAppearance.ts b/src/hooks/useSelectAppearance.ts
index 5d22c6f2..c25943b8 100644
--- a/src/hooks/useSelectAppearance.ts
+++ b/src/hooks/useSelectAppearance.ts
@@ -5,24 +5,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import { useMemo } from 'react';
+
 /** Hook used to modify the appearance of Select into a readonly TextField,
     by hiding display button and setting readOnly prop to true
     if options list is only one element long.
     P.S :  Do not use on AutoComplete.
 */
 export function useSelectAppearance(listLength: number) {
-    if (listLength === 1) {
-        return {
-            IconComponent: () => null,
-            sx: {
-                boxShadow: 'none',
-                '.MuiOutlinedInput-notchedOutline': { border: 'none' },
-                pointerEvents: 'none',
-                border: 'none',
-            },
-            readOnly: true,
-            disableUnderline: true,
-        };
-    }
-    return {};
+    return useMemo(() => {
+        if (listLength === 1) {
+            return {
+                IconComponent: () => null,
+                sx: {
+                    boxShadow: 'none',
+                    '.MuiOutlinedInput-notchedOutline': { border: 'none' },
+                    pointerEvents: 'none',
+                    border: 'none',
+                },
+                readOnly: true,
+                disableUnderline: true,
+            };
+        }
+        return {};
+    }, [listLength]);
 }

From c740e5f5399a2bbf9d88d069e5acc8fc67962418 Mon Sep 17 00:00:00 2001
From: basseche <bassel.el-cheikh_externe@rte-france.com>
Date: Thu, 30 Jan 2025 14:29:23 +0100
Subject: [PATCH 16/16] review2

---
 .../reactQueryBuilder/PropertyValueEditor.tsx | 24 +++-----------
 .../reactQueryBuilder/TextValueEditor.tsx     | 14 ++++++++-
 src/hooks/useCustomFilterOptions.ts           | 31 +++++++++++++++++++
 3 files changed, 48 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/useCustomFilterOptions.ts

diff --git a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
index e0b393a7..ac432eee 100644
--- a/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import Grid from '@mui/material/Grid';
-import { Autocomplete, createFilterOptions, FilterOptionsState, MenuItem, Select, TextField } from '@mui/material';
+import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
 import { useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';
@@ -17,6 +17,7 @@ import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
 import { EquipmentType } from '../../../utils';
 import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
+import { useCustomFilterOptions } from '../../../hooks/useCustomFilterOptions';
 
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
 
@@ -71,23 +72,6 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
         [valueEditorProps]
     );
 
-    const filterOptions = useCallback((options: string[], params: FilterOptionsState<string>) => {
-        const filter = createFilterOptions<string>();
-        const filteredOptions = filter(options, params);
-        const { inputValue } = params;
-
-        const isExisting = options.some((option) => inputValue === option);
-        if (isExisting && options.length === 1 && options[0] === inputValue) {
-            // exact match : nothing to show
-            return [];
-        }
-
-        if (inputValue !== '' && !isExisting) {
-            filteredOptions.push(inputValue);
-        }
-        return filteredOptions;
-    }, []);
-
     return (
         <Grid container spacing={1} item>
             <Grid item xs={5}>
@@ -102,7 +86,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_NAME, value);
                     }}
                     size="small"
-                    filterOptions={filterOptions}
+                    filterOptions={useCustomFilterOptions()}
                 />
             </Grid>
             <Grid item xs="auto">
@@ -142,7 +126,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                         onChange(FieldConstants.PROPERTY_VALUES, value);
                     }}
                     size="small"
-                    filterOptions={filterOptions}
+                    filterOptions={useCustomFilterOptions()}
                 />
             </Grid>
         </Grid>
diff --git a/src/components/inputs/reactQueryBuilder/TextValueEditor.tsx b/src/components/inputs/reactQueryBuilder/TextValueEditor.tsx
index 34190a97..896d8997 100644
--- a/src/components/inputs/reactQueryBuilder/TextValueEditor.tsx
+++ b/src/components/inputs/reactQueryBuilder/TextValueEditor.tsx
@@ -8,8 +8,10 @@
 import { ValueEditorProps } from 'react-querybuilder';
 import { MaterialValueEditor } from '@react-querybuilder/material';
 import { Autocomplete, TextField } from '@mui/material';
+import { useIntl } from 'react-intl';
 import { useConvertValue } from './hooks/useConvertValue';
 import { useValid } from './hooks/useValid';
+import { useCustomFilterOptions } from '../../../hooks/useCustomFilterOptions';
 
 export function TextValueEditor(props: ValueEditorProps) {
     useConvertValue(props);
@@ -18,6 +20,9 @@ export function TextValueEditor(props: ValueEditorProps) {
 
     const { value, handleOnChange, title } = props;
     // The displayed component totally depends on the value type and not the operator. This way, we have smoother transition.
+    const customFilterOptions = useCustomFilterOptions();
+    const intl = useIntl();
+
     if (!Array.isArray(value)) {
         return <MaterialValueEditor {...props} />;
     }
@@ -29,9 +34,16 @@ export function TextValueEditor(props: ValueEditorProps) {
             onChange={(event, newValue: any) => handleOnChange(newValue)}
             multiple
             fullWidth
-            renderInput={(params) => <TextField {...params} error={!valid} />}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    error={!valid}
+                    placeholder={value?.length > 0 ? '' : intl.formatMessage({ id: 'valuesList' })}
+                />
+            )}
             size="small"
             title={title}
+            filterOptions={customFilterOptions}
         />
     );
 }
diff --git a/src/hooks/useCustomFilterOptions.ts b/src/hooks/useCustomFilterOptions.ts
new file mode 100644
index 00000000..4b24cb21
--- /dev/null
+++ b/src/hooks/useCustomFilterOptions.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 { useCallback } from 'react';
+import { createFilterOptions, FilterOptionsState } from '@mui/material';
+
+/**
+ * Hook used to add custom filterOptions, use only when freeSolo = true
+ */
+export function useCustomFilterOptions() {
+    return useCallback((options: string[], params: FilterOptionsState<string>) => {
+        const filter = createFilterOptions<string>();
+        const filteredOptions = filter(options, params);
+        const { inputValue } = params;
+
+        const isExisting = options.some((option) => inputValue === option);
+        if (isExisting && options.length === 1 && options[0] === inputValue) {
+            // exact match : nothing to show
+            return [];
+        }
+
+        if (inputValue !== '' && !isExisting) {
+            filteredOptions.push(inputValue);
+        }
+        return filteredOptions;
+    }, []);
+}