AutoComplete not being filled automatically
Hello, i have an AutoComplete component inside a Controller from Hook Form, both inside an Edit view component of MUI. The other fields are automatically filled with the response from the request that the Edit component calls. But my AutoComplete doesn't fill with the value coming from the response. My code below:
const { autocompleteProps: processTypeProps } = useAutocomplete<any>(
{
resource: "process-type",
}
);
<Edit>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<Controller
control={control}
name="processTypeId"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete<any>
id="processTypeId"
{...processTypeProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
const tipo = processTypeProps?.options?.find(
(p) => p?.id?.toString() === item?.id?.toString()
);
return tipo?.code + " - " + tipo?.name;
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{ shrink: !!getValues("processTypeId") }}
label="Tipo de processo"
margin="normal"
variant="outlined"
error={!!errors.processTypeId}
required
/>
)}
/>
)}
/>
</Box>
</Edit>
const { autocompleteProps: processTypeProps } = useAutocomplete<any>(
{
resource: "process-type",
}
);
<Edit>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<Controller
control={control}
name="processTypeId"
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete<any>
id="processTypeId"
{...processTypeProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(item) => {
const tipo = processTypeProps?.options?.find(
(p) => p?.id?.toString() === item?.id?.toString()
);
return tipo?.code + " - " + tipo?.name;
}}
isOptionEqualToValue={(option, value) =>
value === undefined ||
option?.id?.toString() === (value?.id ?? value)?.toString()
}
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{ shrink: !!getValues("processTypeId") }}
label="Tipo de processo"
margin="normal"
variant="outlined"
error={!!errors.processTypeId}
required
/>
)}
/>
)}
/>
</Box>
</Edit>
