diff --git a/src/qqq/components/processes/BulkLoadFileMappingField.tsx b/src/qqq/components/processes/BulkLoadFileMappingField.tsx index a51da05..ac06871 100644 --- a/src/qqq/components/processes/BulkLoadFileMappingField.tsx +++ b/src/qqq/components/processes/BulkLoadFileMappingField.tsx @@ -56,6 +56,7 @@ export default function BulkLoadFileMappingField({bulkLoadField, isRequired, rem const [valueType, setValueType] = useState(bulkLoadField.valueType); const [selectedColumn, setSelectedColumn] = useState({label: columnNames[bulkLoadField.columnIndex], value: bulkLoadField.columnIndex}); + const [selectedColumnInputValue, setSelectedColumnInputValue] = useState(columnNames[bulkLoadField.columnIndex]); const [doingInitialLoadOfPossibleValue, setDoingInitialLoadOfPossibleValue] = useState(false); const [everDidInitialLoadOfPossibleValue, setEverDidInitialLoadOfPossibleValue] = useState(false); @@ -121,6 +122,7 @@ export default function BulkLoadFileMappingField({bulkLoadField, isRequired, rem if(bulkLoadField.columnIndex != null && bulkLoadField.columnIndex != undefined && selectedColumn.label && columnNames[bulkLoadField.columnIndex] != selectedColumn.label) { setSelectedColumn({label: columnNames[bulkLoadField.columnIndex], value: bulkLoadField.columnIndex}) + setSelectedColumnInputValue(columnNames[bulkLoadField.columnIndex]); } const mainFontSize = "0.875rem"; @@ -146,6 +148,8 @@ export default function BulkLoadFileMappingField({bulkLoadField, isRequired, rem function columnChanged(event: any, newValue: any, reason: string) { setSelectedColumn(newValue); + setSelectedColumnInputValue(newValue == null ? "" : newValue.label); + bulkLoadField.columnIndex = newValue == null ? null : newValue.value; if (fileDescription.hasHeaderRow) @@ -192,7 +196,15 @@ export default function BulkLoadFileMappingField({bulkLoadField, isRequired, rem forceParentUpdate && forceParentUpdate(); } - return ( + /*************************************************************************** + ** + ***************************************************************************/ + function changeSelectedColumnInputValue(e: React.ChangeEvent) + { + setSelectedColumnInputValue(e.target.value); + } + + return ( ()} + renderInput={(params) => ( changeSelectedColumnInputValue(e)} fullWidth variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} sx={{"& .MuiOutlinedInput-root": {borderRadius: "0.75rem"}}} />)} fullWidth options={columnOptions} multiple={false} defaultValue={selectedColumn} value={selectedColumn} - inputValue={selectedColumn?.label} + inputValue={selectedColumnInputValue} onChange={columnChanged} getOptionLabel={(option) => typeof (option) == "string" ? option : (option?.label ?? "")} isOptionEqualToValue={(option, value) => option == null && value == null || option.value == value.value}