I am following this documentation https://mui.com/material-ui/react-autocomplete/#creatable
but when I add a new push to the filtered variable the first push that is done is duplicated with each word that is typed
The problem is in the pushes, when it is one, it works well, but when it is more than one, it has the fault that it duplicates with each word that is written.
<FormControl fullWidth>
<Controller
name='origin'
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Autocomplete
value={value}
onChange={async (event, newValue) => {
if (typeof newValue === 'string') {
setTimeout(async () => {
const payload = await createOriginCategory(newValue);
onChange(payload);
});
} else if (
newValue?.id === 'create' &&
newValue?.inputValue
) {
const payload = await createOriginCategory(
newValue.inputValue,
);
onChange({
...payload,
inputValue: newValue.inputValue,
});
} else if (
newValue?.id === 'update' &&
newValue?.inputValue
) {
console.log('update new value', newValue);
} else {
setOptionValue(newValue);
onChange(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '') {
// this is the duplicate
filtered.push({
inputValue: params.inputValue,
id: 'create',
description: `Crear "${params.inputValue}"`,
});
filtered.push({
inputValue: params.inputValue,
id: 'update',
description: `Configurar "${params.inputValue}"`,
});
}
return filtered;
}}
id='free-solo-dialog-demo'
options={originList}
getOptionLabel={(option) => {
if (typeof option === 'string') {
return option;
}
if (option.inputValue) {
return option.inputValue;
}
return option.description;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
renderOption={(props, option) => {
const { ...optionProps } = props;
return (
<li key={option.id} {...optionProps}>
{option.description}
</li>
);
}}
freeSolo
renderInput={(params) => (
<TextField {...params} label='Origen' />
)}
/>
)}
/>
</FormControl>