diff --git a/src/components/dialogs/regulating-terminal/regulating-terminal-form.jsx b/src/components/dialogs/regulating-terminal/regulating-terminal-form.jsx index c1f42cb8fe..18ce041a23 100644 --- a/src/components/dialogs/regulating-terminal/regulating-terminal-form.jsx +++ b/src/components/dialogs/regulating-terminal/regulating-terminal-form.jsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Grid, Popper } from '@mui/material'; +import { Box, Grid, Popper } from '@mui/material'; import { createFilterOptions } from '@mui/material/useAutocomplete'; import { EQUIPMENT, ID, TYPE, VOLTAGE_LEVEL } from 'components/utils/field-constants'; import PropTypes from 'prop-types'; @@ -48,7 +48,11 @@ const RegulatingTerminalForm = ({ }); useEffect(() => { - if (watchVoltageLevelId) { + if ( + watchVoltageLevelId && + /* avoid fetch non existing vl id */ + voltageLevelOptions.find((vlOption) => vlOption.id === watchVoltageLevelId) + ) { fetchVoltageLevelEquipments( studyUuid, currentNodeUuid, @@ -62,107 +66,111 @@ const RegulatingTerminalForm = ({ } else { setEquipmentsOptions([]); } - }, [watchVoltageLevelId, id, studyUuid, currentNodeUuid, currentRootNetworkUuid]); + }, [watchVoltageLevelId, voltageLevelOptions, id, studyUuid, currentNodeUuid, currentRootNetworkUuid]); const resetEquipment = useCallback(() => { setValue(`${id}.${EQUIPMENT}`, null); }, [id, setValue]); return ( - <> - - - { - (vl?.[ID] ? vl?.[ID] : '')} - onChangeCallback={resetEquipment} - previousValue={previousRegulatingTerminalValue} - /* Modifies the filter option method so that when a value is directly entered in the text field, a new option + + + { + { + return typeof value === 'string' ? { id: value, label: value } : value; + }} + forcePopupIcon + autoHighlight + selectOnFocus + disabled={disabled} + id="voltage-level" + options={voltageLevelOptions} + getOptionLabel={(vl) => (vl?.id ? vl?.id : '')} + onChangeCallback={resetEquipment} + previousValue={previousRegulatingTerminalValue} + /* Modifies the filter option method so that when a value is directly entered in the text field, a new option is created in the options list with a value equal to the input value */ - filterOptions={(options, params) => { - const filtered = filter(options, params); - if ( - params.inputValue !== '' && - !options.find((opt) => opt?.[ID] === params.inputValue) - ) { - filtered.push({ - inputValue: params.inputValue, - [ID]: params.inputValue, - }); - } - return filtered; - }} - PopperComponent={FittingPopper} - /> - } - - - {/* TODO: autoComplete prop is not working properly with material-ui v4, - it clears the field when blur event is raised, which actually forces the user to validate free input - with enter key for it to be validated. - check if autoComplete prop is fixed in v5 */} - { - (value === null ? '' : value)} - outputTransform={(value) => (value === '' ? null : value)} - label="Equipment" - size="small" - freeSolo - forcePopupIcon - autoHighlight - selectOnFocus - id="equipment" - disabled={!watchVoltageLevelId || disabled} - previousValue={previousEquipmentSectionTypeValue} - options={equipmentsOptions} - getOptionLabel={(equipment) => { - return equipment === '' - ? '' // to clear field - : (equipment?.[TYPE] ?? equipmentSectionTypeDefaultValue) + - ' : ' + - equipment?.[ID] || ''; - }} - /* Modifies the filter option method so that when a value is directly entered in the text field, a new option + filterOptions={(options, params) => { + const filtered = filter(options, params); + if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) { + filtered.push({ + id: params.inputValue, + label: params.inputValue, + }); + } + return filtered; + }} + PopperComponent={FittingPopper} + allowNewValue + /> + } + + + { + { + return typeof value === 'string' + ? value === '' + ? null + : { id: value, type: equipmentSectionTypeDefaultValue } + : value; + }} + inputTransform={(value) => (value === null ? '' : value)} + label="Equipment" + size="small" + forcePopupIcon + autoHighlight + selectOnFocus + id="equipment" + disabled={!watchVoltageLevelId || disabled} + previousValue={previousEquipmentSectionTypeValue} + options={equipmentsOptions} + getOptionLabel={(equipment) => { + return equipment === '' ? '' : equipment?.[ID] || ''; + }} + renderOption={(props, option) => { + const { key, ...optionProps } = props; + return ( + + {option?.[TYPE] ? `${option?.[TYPE]} : ${option?.[ID]}` : option?.[ID]} + + ); + }} + /* Modifies the filter option method so that when a value is directly entered in the text field, a new option is created in the options list with a value equal to the input value */ - filterOptions={(options, params) => { - const filtered = filter(options, params); - if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) { - filtered.push({ - [TYPE]: equipmentSectionTypeDefaultValue, - [ID]: params.inputValue, - }); - } - return filtered; - }} - PopperComponent={FittingPopper} - /> - } - + filterOptions={(options, params) => { + const filtered = filter(options, params); + if (params.inputValue !== '' && !options.find((opt) => opt?.id === params.inputValue)) { + filtered.push({ + [TYPE]: equipmentSectionTypeDefaultValue, + [ID]: params.inputValue, + }); + } + return filtered; + }} + allowNewValue + PopperComponent={FittingPopper} + /> + } - + ); };