MUI Autocomplete with "multiple" prop not initially populated
I am using a MUI Autocomplete with "multiple" prop in an Edit page.
The entity of the edit page has the values (multiple) in the "fishes" property, which is a list of IDs.
When i enter the page for an entity that already has the "fishes" property populated, the Autocomplete does not pre-compile the input with the pre-existing values.
The entity of the edit page has the values (multiple) in the "fishes" property, which is a list of IDs.
When i enter the page for an entity that already has the "fishes" property populated, the Autocomplete does not pre-compile the input with the pre-existing values.
const {
refineCore: { query, formLoading },
} = useForm({});
const record = query?.data?.data;
const { autocompleteProps: fishesAutocompleteProps } = useAutocomplete({
resource: "fishes",
defaultValue: record?.fishes ?? [],
onSearch: (value) => [
{
field: "scientific_name",
operator: "contains",
value,
}
]
});const {
refineCore: { query, formLoading },
} = useForm({});
const record = query?.data?.data;
const { autocompleteProps: fishesAutocompleteProps } = useAutocomplete({
resource: "fishes",
defaultValue: record?.fishes ?? [],
onSearch: (value) => [
{
field: "scientific_name",
operator: "contains",
value,
}
]
});<Autocomplete
{...fishesAutocompleteProps}
multiple
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
getOptionLabel={(option) => `${option.scientific_name} (${option.common_name})`}
onChange={(event, value) => setValue("fishes", value.map((fish) => fish.id))}
renderOption={(props, option) => {
const { key, ...rest } = props;
return (
<Box component="li" sx={{ display: 'flex', alignItems: 'center' }} key={key} {...rest}>
<Avatar src={option.imageUrl} alt={option.scientific_name} sx={{ marginRight: 2 }} />
{`${option.scientific_name} (${option.common_name})`}
</Box>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Pesci"
placeholder="Seleziona i pesci"
margin="normal"
fullWidth
slotProps={{
inputLabel: {
shrink: true
}
}}
error={!!(errors as any)?.fishes}
helperText={(errors as any)?.fishes?.message}
/>
)}
/><Autocomplete
{...fishesAutocompleteProps}
multiple
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
getOptionLabel={(option) => `${option.scientific_name} (${option.common_name})`}
onChange={(event, value) => setValue("fishes", value.map((fish) => fish.id))}
renderOption={(props, option) => {
const { key, ...rest } = props;
return (
<Box component="li" sx={{ display: 'flex', alignItems: 'center' }} key={key} {...rest}>
<Avatar src={option.imageUrl} alt={option.scientific_name} sx={{ marginRight: 2 }} />
{`${option.scientific_name} (${option.common_name})`}
</Box>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Pesci"
placeholder="Seleziona i pesci"
margin="normal"
fullWidth
slotProps={{
inputLabel: {
shrink: true
}
}}
error={!!(errors as any)?.fishes}
helperText={(errors as any)?.fishes?.message}
/>
)}
/>
