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>
2 Replies
Hi @jpauloc97. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the code you've provided and the information from the knowledge sources, I can see why your AutoComplete component isn't being filled automatically. Let me explain the issue and suggest a solution.
The problem lies in how the
defaultValue is being set for the Controller component. In your code, you're setting it to null as any, which means the AutoComplete doesn't have an initial value to display.
To fix this, you need to set the defaultValue to the value coming from the response. Here's how you can modify your code:
The key changes are:
1. Set defaultValue to getValues("processTypeId") || null. This will use the value from the form if it exists, or null otherwise.
2. Add a value prop to the Autocomplete component, set to field.value || null. This ensures that the Autocomplete always has a controlled value.
These changes should make the AutoComplete fill automatically with the value from the response.
This solution is based on the patterns shown in the Material UI Autocomplete documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-auto-complete/#how-do-i-use-it-with-crud-components-and-useform) and the Edit component documentation (https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/edit/).
Also, make sure that the processTypeId field in your form data matches the structure expected by the Autocomplete component. If the data structure doesn't match, you might need to transform it before setting it as the default value.
If you're still having issues after making these changes, it might be helpful to check the structure of the data returned by your API and ensure it matches what the Autocomplete component expects.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@665317837656555562> Kapa.ai is still learning and improving, please let me know how I did by reacting below.