From b40cb9b3e51eacb261dc69d2c3b55a22e22a79ea Mon Sep 17 00:00:00 2001
From: Florent MILLOT <75525996+flomillot@users.noreply.github.com>
Date: Mon, 1 Dec 2025 18:34:18 +0100
Subject: [PATCH 1/2] Refactor DirectoryItemsInput to use MUI Select with
 improved UX

- Replace input by MUI Select/OutlinedInput component
- Add proper label support with InputLabel
- Implement chip-based multi-selection with click handlers
- Add event propagation control for chip interactions
- Update OverflowableChip and OverflowableChipWithHelperText with boxSx prop
- Prevent tooltip click propagation in OverflowableText
- Update demo with DirectoryItemsInput example

Signed-off-by: Florent MILLOT <75525996+flomillot@users.noreply.github.com>
---
 demo/src/InputsTab.jsx                        |  16 ++
 demo/src/app.jsx                              |   6 +-
 .../reactHookForm/DirectoryItemsInput.tsx     | 223 +++++++++++-------
 .../inputs/reactHookForm/OverflowableChip.tsx |  40 ++--
 .../OverflowableChipWithHelperText.tsx        |  16 +-
 .../overflowableText/OverflowableText.tsx     |  10 +-
 src/translations/en/inputsEn.ts               |   2 +-
 src/translations/fr/inputsFr.ts               |   2 +-
 8 files changed, 208 insertions(+), 107 deletions(-)

diff --git a/demo/src/InputsTab.jsx b/demo/src/InputsTab.jsx
index 7553eaa69..92d8f8370 100644
--- a/demo/src/InputsTab.jsx
+++ b/demo/src/InputsTab.jsx
@@ -24,6 +24,8 @@ import {
     ExpandingTextField,
     CustomFormProvider,
     SelectClearable,
+    DirectoryItemsInput,
+    ElementType,
 } from '../../src';
 
 const AUTOCOMPLETE_INPUT = 'autocomplete';
@@ -36,6 +38,7 @@ const INTEGER_INPUT = 'integer';
 const FLOAT_INPUT = 'float';
 const CHECKBOX_INPUT = 'checkbox';
 const SWITCH_INPUT = 'switch';
+const DIRECTORY_ITEMS_INPUT = 'directoryItems';
 
 const emptyFormData = {
     [AUTOCOMPLETE_INPUT]: null,
@@ -48,6 +51,7 @@ const emptyFormData = {
     [FLOAT_INPUT]: null,
     [CHECKBOX_INPUT]: false, // or null, but should then be nullable in schema
     [SWITCH_INPUT]: false, // or null, but should then be nullable in schema
+    [DIRECTORY_ITEMS_INPUT]: [],
 };
 
 const formSchema = yup.object().shape({
@@ -61,6 +65,7 @@ const formSchema = yup.object().shape({
     [FLOAT_INPUT]: yup.number().nullable(),
     [CHECKBOX_INPUT]: yup.boolean(),
     [SWITCH_INPUT]: yup.boolean(),
+    [DIRECTORY_ITEMS_INPUT]: yup.array().of(yup.object()).default([]),
 });
 
 const options = [
@@ -166,6 +171,17 @@ function InputsTab() {
                     <Grid item xs={gridSize}>
                         <SwitchInput name={SWITCH_INPUT} label="inputs/switch" />
                     </Grid>
+                    <Grid item xs={12}>
+                        <DirectoryItemsInput
+                            name={DIRECTORY_ITEMS_INPUT}
+                            label="inputs/directory-items"
+                            titleId="inputs/directory-items"
+                            elementType={ElementType.FILTER}
+                            allowMultiSelect
+                            hideErrorMessage
+                            disable
+                        />
+                    </Grid>
                 </Grid>
                 <Box
                     sx={{
diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index ae8766fea..c7e3e97bc 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -66,6 +66,7 @@ import {
     equipmentsEn,
     equipmentsFr,
     equipmentStyles,
+    EquipmentType,
     filterEn,
     filterExpertEn,
     filterExpertFr,
@@ -91,6 +92,8 @@ import {
     networkModificationsFr,
     OverflowableChipWithHelperText,
     OverflowableText,
+    parametersEn,
+    parametersFr,
     reportViewerEn,
     reportViewerFr,
     SnackbarProvider,
@@ -104,7 +107,6 @@ import {
     treeviewFinderEn,
     treeviewFinderFr,
     useSnackMessage,
-    EquipmentType,
 } from '../../src';
 
 const messages = {
@@ -127,6 +129,7 @@ const messages = {
         ...commonButtonEn,
         ...networkModificationsEn,
         ...inputsEn,
+        ...parametersEn,
         ...translations.en,
     },
     fr: {
@@ -148,6 +151,7 @@ const messages = {
         ...networkModificationsFr,
         ...multipleSelectionDialogFr,
         ...inputsFr,
+        ...parametersFr,
         ...translations.fr,
     },
 };
diff --git a/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx b/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
index 340966887..40509bca1 100644
--- a/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
+++ b/src/components/inputs/reactHookForm/DirectoryItemsInput.tsx
@@ -5,13 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FormControl, IconButton, Tooltip } from '@mui/material';
-import { Folder as FolderIcon } from '@mui/icons-material';
+import { Box, FormControl, IconButton, InputLabel, OutlinedInput, Select, Tooltip } from '@mui/material';
+import { DriveFolderUpload } from '@mui/icons-material';
 import { ComponentType, useCallback, useEffect, useMemo, useState } from 'react';
 import { FieldValues, useController, useFieldArray, useWatch } from 'react-hook-form';
 import { useIntl } from 'react-intl';
 import type { UUID } from 'node:crypto';
-import { FieldLabel, isFieldRequired } from './utils';
 import { useCustomFormContext } from './provider';
 import { ErrorInput, MidFormError } from './errorManagement';
 import { useSnackMessage } from '../../../hooks';
@@ -22,26 +21,36 @@ import { fetchDirectoryElementPath } from '../../../services';
 import { ArrayAction, ElementAttributes, getEquipmentTypeShortLabel, mergeSx } from '../../../utils';
 import { NAME } from './constants';
 import { OverflowableChip, OverflowableChipProps } from './OverflowableChip';
+import { FieldLabel, isFieldRequired } from './utils';
 
 const styles = {
-    formDirectoryElements: {
+    selectDirectoryElements: {
         display: 'flex',
-        gap: '8px',
         flexWrap: 'wrap',
-        flexDirection: 'row',
         alignContent: 'flex-start',
+        cursor: 'pointer',
+        '& .MuiSelect-select': {
+            paddingY: '3px',
+            paddingX: '8px !important', // because of the hidden select icon at right, we force a smaller padding
+        },
+        '& .MuiSelect-icon': {
+            display: 'none',
+        },
+    },
+    renderDirectoryElements: {
+        display: 'flex',
+        flexWrap: 'wrap',
         alignItems: 'center',
-        border: '2px solid lightgray',
-        padding: '2px 8px',
-        borderRadius: '4px',
-        overflow: 'hidden',
     },
-    formDirectoryElementsError: (theme) => ({
-        borderColor: theme.palette.error.main,
-    }),
     addDirectoryElements: {
         marginTop: '-5px',
     },
+    inputLabel: {
+        left: '30px',
+        '&.MuiInputLabel-shrink': {
+            transform: 'translate(-16px, -9px) scale(0.75)',
+        },
+    },
 } as const satisfies MuiStyles;
 
 export interface DirectoryItemsInputProps<CP extends OverflowableChipProps = OverflowableChipProps> {
@@ -60,6 +69,7 @@ export interface DirectoryItemsInputProps<CP extends OverflowableChipProps = Ove
     ChipComponent?: ComponentType<CP>;
     chipProps?: Partial<CP>;
     fullHeight?: boolean;
+    fullWidth?: boolean;
 }
 
 export function DirectoryItemsInput<CP extends OverflowableChipProps = OverflowableChipProps>({
@@ -77,7 +87,8 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
     labelRequiredFromContext = true,
     ChipComponent = OverflowableChip,
     chipProps,
-    fullHeight,
+    fullHeight = false,
+    fullWidth = true,
 }: Readonly<DirectoryItemsInputProps<CP>>) {
     const { snackError } = useSnackMessage();
     const intl = useIntl();
@@ -136,8 +147,9 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
         [append, getValues, snackError, name, onRowChanged, onChange, selected, remove]
     );
 
-    const removeElements = useCallback(
-        (index: number) => {
+    const handleDeleteChip = useCallback(
+        (event: React.MouseEvent, index: number) => {
+            event.stopPropagation();
             const elemToRemove = getValues(name)[index];
             remove(index);
             const newElems = getValues(name); // must call getValues again to get the newly updated array
@@ -147,7 +159,7 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
         [onRowChanged, remove, getValues, name, onChange]
     );
 
-    const handleChipClick = useCallback(
+    const openItemsSelector = useCallback(
         (index: number) => {
             const chips = getValues(name);
             const chip = chips.at(index)?.id;
@@ -165,10 +177,32 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
         [getValues, name]
     );
 
+    const handleClickChip = useCallback(
+        (event: React.MouseEvent, index: number) => {
+            event.stopPropagation();
+            openItemsSelector(index);
+        },
+        [openItemsSelector]
+    );
+
     const shouldReplaceElement = useMemo(() => {
         return allowMultiSelect === false && elements?.length === 1;
     }, [allowMultiSelect, elements]);
 
+    const handleClickInput = useCallback(() => {
+        if (disable) {
+            return;
+        }
+        if (shouldReplaceElement) {
+            openItemsSelector(0);
+        } else {
+            setDirectoryItemSelectorOpen(true);
+            if (allowMultiSelect) {
+                setMultiSelect(true);
+            }
+        }
+    }, [shouldReplaceElement, openItemsSelector, allowMultiSelect, disable]);
+
     const hasElementsWithoutName = useMemo(() => {
         const elementsToCheck = (watchedElements ?? elements) as FieldValues[] | undefined;
 
@@ -191,78 +225,103 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
         }
     }, [clearErrors, getFieldState, hasElementsWithoutName, intl, name, setError]);
 
+    const inputId = `directory-items-input-${name}`;
+
+    const fullLabel = label && (
+        <FieldLabel
+            label={label}
+            optional={labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())}
+        />
+    );
+
+    const hasElements = elements && elements.length > 0;
+
+    const fullHeightSx = fullHeight ? { height: '100%' } : undefined;
+
+    // 6ch for folder + approximate width of the label text
+    const selectWidth = label ? `${6 + label.length * 0.8}ch` : 'auto';
+
+    // To keep folder icon visible and in the same flexbox as chips, we render it in renderValue (not startAdornment).
+    // This also requires manually controlling label shrink/notch and setting displayEmpty to true.
     return (
-        <>
+        <Box sx={fullHeightSx}>
             <FormControl
-                sx={mergeSx(
-                    styles.formDirectoryElements,
-                    // @ts-expect-error
-                    error?.message && styles.formDirectoryElementsError,
-                    fullHeight && { height: '100%' }
-                )}
+                size="small"
+                fullWidth={fullWidth}
+                sx={fullHeightSx}
+                disabled={disable}
                 error={!!error?.message}
             >
-                <Tooltip title={intl.formatMessage({ id: titleId })}>
-                    <span>
-                        <IconButton
-                            size="small"
-                            disabled={disable}
-                            onClick={() => {
-                                if (shouldReplaceElement) {
-                                    handleChipClick(0);
-                                } else {
-                                    setDirectoryItemSelectorOpen(true);
-                                    if (allowMultiSelect) {
-                                        setMultiSelect(true);
-                                    }
-                                }
-                            }}
-                        >
-                            <FolderIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-                {elements?.map((item, index) => {
-                    const elementName =
-                        watchedElements?.[index]?.[NAME] ??
-                        getValues(`${name}.${index}.${NAME}`) ??
-                        (item as FieldValues)?.[NAME];
+                {label && (
+                    <InputLabel htmlFor={inputId} shrink={hasElements} sx={styles.inputLabel}>
+                        {fullLabel}
+                    </InputLabel>
+                )}
+                <Select
+                    value={elements}
+                    multiple
+                    displayEmpty
+                    notched={hasElements}
+                    open={false} // disable the MUI select menu
+                    onClick={handleClickInput}
+                    sx={mergeSx(styles.selectDirectoryElements, { minWidth: selectWidth }, fullHeightSx)}
+                    input={
+                        <OutlinedInput
+                            id={inputId}
+                            {...(label && {
+                                label: fullLabel,
+                            })}
+                        />
+                    }
+                    renderValue={(directoryElements: TreeViewFinderNodeProps[]) => (
+                        <Box sx={styles.renderDirectoryElements}>
+                            <Tooltip title={intl.formatMessage({ id: titleId })}>
+                                <span>
+                                    <IconButton size="small" disabled={disable}>
+                                        <DriveFolderUpload />
+                                    </IconButton>
+                                </span>
+                            </Tooltip>
+                            {directoryElements?.map((item, index) => {
+                                const elementName =
+                                    watchedElements?.[index]?.[NAME] ??
+                                    getValues(`${name}.${index}.${NAME}`) ??
+                                    (item as FieldValues)?.[NAME];
 
-                    const equipmentTypeShortLabel = getEquipmentTypeShortLabel(item?.specificMetadata?.equipmentType);
+                                const equipmentTypeShortLabel = getEquipmentTypeShortLabel(
+                                    item?.specificMetadata?.equipmentType
+                                );
 
-                    const { sx: chipSx, ...otherChipProps } = chipProps ?? {};
+                                const { sx: chipSx, ...otherChipProps } = chipProps ?? {};
 
-                    return (
-                        <ChipComponent
-                            key={item.id}
-                            onDelete={() => removeElements(index)}
-                            onClick={() => handleChipClick(index)}
-                            label={elementName || intl.formatMessage({ id: 'elementNotFound' })}
-                            {...(equipmentTypeShortLabel && {
-                                helperText: intl.formatMessage({
-                                    id: equipmentTypeShortLabel,
-                                }),
+                                return (
+                                    <ChipComponent
+                                        key={item.id}
+                                        onDelete={(e) => handleDeleteChip(e, index)}
+                                        onClick={(e) => handleClickChip(e, index)}
+                                        label={elementName || intl.formatMessage({ id: 'elementNotFound' })}
+                                        {...(equipmentTypeShortLabel && {
+                                            helperText: intl.formatMessage({
+                                                id: equipmentTypeShortLabel,
+                                            }),
+                                        })}
+                                        sx={mergeSx(
+                                            !elementName
+                                                ? (theme) => ({
+                                                      backgroundColor: theme.palette.error.light,
+                                                      borderColor: theme.palette.error.main,
+                                                      color: theme.palette.error.contrastText,
+                                                  })
+                                                : undefined,
+                                            chipSx
+                                        )}
+                                        {...(otherChipProps as CP)}
+                                    />
+                                );
                             })}
-                            sx={mergeSx(
-                                !elementName
-                                    ? (theme) => ({
-                                          backgroundColor: theme.palette.error.light,
-                                          borderColor: theme.palette.error.main,
-                                          color: theme.palette.error.contrastText,
-                                      })
-                                    : undefined,
-                                chipSx
-                            )}
-                            {...(otherChipProps as CP)}
-                        />
-                    );
-                })}
-                {elements?.length === 0 && label && (
-                    <FieldLabel
-                        label={label}
-                        optional={labelRequiredFromContext && !isFieldRequired(name, validationSchema, getValues())}
-                    />
-                )}
+                        </Box>
+                    )}
+                />
             </FormControl>
             {!hideErrorMessage && <ErrorInput name={name} InputField={MidFormError} />}
             <DirectoryItemSelector
@@ -276,6 +335,6 @@ export function DirectoryItemsInput<CP extends OverflowableChipProps = Overflowa
                 expanded={expanded}
                 multiSelect={multiSelect}
             />
-        </>
+        </Box>
     );
 }
diff --git a/src/components/inputs/reactHookForm/OverflowableChip.tsx b/src/components/inputs/reactHookForm/OverflowableChip.tsx
index 6d1c59d15..ba83e9dab 100644
--- a/src/components/inputs/reactHookForm/OverflowableChip.tsx
+++ b/src/components/inputs/reactHookForm/OverflowableChip.tsx
@@ -5,27 +5,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.ds
  */
 
-import { Box, Chip, type ChipProps } from '@mui/material';
+import { Box, BoxProps, Chip, type ChipProps } from '@mui/material';
 import { OverflowableText } from '../../overflowableText';
 
-export interface OverflowableChipProps extends ChipProps {}
+export interface OverflowableChipProps extends ChipProps {
+    boxSx?: BoxProps['sx'];
+}
 
-export function OverflowableChip({ label, ...otherProps }: Readonly<OverflowableChipProps>) {
+export function OverflowableChip({ label, boxSx, ...otherProps }: Readonly<OverflowableChipProps>) {
     return (
-        <Chip
-            size="small"
-            label={
-                <Box sx={{ display: 'flex' }}>
-                    <OverflowableText
-                        text={label}
-                        sx={{
-                            maxWidth: '20ch',
-                            mx: 'auto',
-                        }}
-                    />
-                </Box>
-            }
-            {...otherProps}
-        />
+        <Box padding="3px" sx={{ cursor: 'default', ...boxSx }} onClick={(e) => e.stopPropagation()}>
+            <Chip
+                size="small"
+                label={
+                    <Box sx={{ display: 'flex' }}>
+                        <OverflowableText
+                            text={label}
+                            sx={{
+                                maxWidth: '20ch',
+                                marginX: 'auto',
+                            }}
+                        />
+                    </Box>
+                }
+                {...otherProps}
+            />
+        </Box>
     );
 }
diff --git a/src/components/inputs/reactHookForm/OverflowableChipWithHelperText.tsx b/src/components/inputs/reactHookForm/OverflowableChipWithHelperText.tsx
index 30901ecd7..9c4e171cc 100644
--- a/src/components/inputs/reactHookForm/OverflowableChipWithHelperText.tsx
+++ b/src/components/inputs/reactHookForm/OverflowableChipWithHelperText.tsx
@@ -7,6 +7,7 @@
 
 import { Box, FormHelperText } from '@mui/material';
 import { OverflowableChip, OverflowableChipProps } from './OverflowableChip';
+import { mergeSx } from '../../../utils';
 
 export interface OverflowableChipWithHelperTextProps extends OverflowableChipProps {
     helperText?: string;
@@ -14,12 +15,21 @@ export interface OverflowableChipWithHelperTextProps extends OverflowableChipPro
 
 export function OverflowableChipWithHelperText({
     helperText,
+    boxSx,
     ...otherProps
 }: Readonly<OverflowableChipWithHelperTextProps>) {
     return (
-        <Box sx={{ display: 'flex', alignItems: 'left', flexDirection: 'column' }}>
-            <OverflowableChip {...otherProps} />
-            {helperText && <FormHelperText sx={{ fontSize: 'x-small' }}>{helperText}</FormHelperText>}
+        <Box
+            display="flex"
+            alignItems="left"
+            flexDirection="column"
+            sx={mergeSx({ cursor: 'default' }, boxSx)}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <OverflowableChip boxSx={{ paddingBottom: '2px' }} {...otherProps} />
+            {helperText && (
+                <FormHelperText sx={{ fontSize: 'x-small', margin: 0, marginLeft: 2 }}>{helperText}</FormHelperText>
+            )}
         </Box>
     );
 }
diff --git a/src/components/overflowableText/OverflowableText.tsx b/src/components/overflowableText/OverflowableText.tsx
index 58445375e..345a005eb 100644
--- a/src/components/overflowableText/OverflowableText.tsx
+++ b/src/components/overflowableText/OverflowableText.tsx
@@ -86,7 +86,15 @@ export const OverflowableText = styled(
         const tooltipStyleProps = {
             ...(tooltipStyle && { classes: { tooltip: tooltipStyle } }),
             ...(finalTooltipSx && {
-                slotProps: { tooltip: { sx: finalTooltipSx } },
+                slotProps: {
+                    tooltip: {
+                        onClick: (e: React.MouseEvent) => e.stopPropagation(),
+                        sx: finalTooltipSx,
+                    },
+                    popper: {
+                        onClick: (e: React.MouseEvent) => e.stopPropagation(),
+                    },
+                },
             }),
         };
 
diff --git a/src/translations/en/inputsEn.ts b/src/translations/en/inputsEn.ts
index 3cd06778a..d8352ed1f 100644
--- a/src/translations/en/inputsEn.ts
+++ b/src/translations/en/inputsEn.ts
@@ -21,5 +21,5 @@ export const inputsEn = {
     'inputs/boolean': 'Boolean',
     'inputs/checkbox': 'Checkbox',
     'inputs/switch': 'Switch',
-    Optional: 'Optional',
+    'inputs/directory-items': 'Directory items',
 };
diff --git a/src/translations/fr/inputsFr.ts b/src/translations/fr/inputsFr.ts
index 742c7b8f1..0154233a7 100644
--- a/src/translations/fr/inputsFr.ts
+++ b/src/translations/fr/inputsFr.ts
@@ -21,5 +21,5 @@ export const inputsFr = {
     'inputs/boolean': 'Boolean',
     'inputs/checkbox': 'Checkbox',
     'inputs/switch': 'Switch',
-    Optional: 'Optional',
+    'inputs/directory-items': 'Éléments du répertoire',
 };

From 324d8c5db662498d1455689a2a3c4244c95203e1 Mon Sep 17 00:00:00 2001
From: Florent MILLOT <75525996+flomillot@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:03:30 +0100
Subject: [PATCH 2/2] Update demo/src/InputsTab.jsx

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

diff --git a/demo/src/InputsTab.jsx b/demo/src/InputsTab.jsx
index 92d8f8370..e52599aa8 100644
--- a/demo/src/InputsTab.jsx
+++ b/demo/src/InputsTab.jsx
@@ -171,7 +171,7 @@ function InputsTab() {
                     <Grid item xs={gridSize}>
                         <SwitchInput name={SWITCH_INPUT} label="inputs/switch" />
                     </Grid>
-                    <Grid item xs={12}>
+                    <Grid item xs={gridSize}>
                         <DirectoryItemsInput
                             name={DIRECTORY_ITEMS_INPUT}
                             label="inputs/directory-items"