other-emerald•2mo ago

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

kapa.ai•2mo ago

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:

<Controller
  control={control}
  name="processTypeId"
  rules={{ required: "This field is required" }}
  defaultValue={getValues("processTypeId") || null}
  render={({ field }) => (
    <Autocomplete<any>
      {...processTypeProps}
      {...field}
      value={field.value || null}
      onChange={(_, value) => {
        field.onChange(value);
      }}
      // ... rest of your Autocomplete props
    />
  )}
/>

<Controller
  control={control}
  name="processTypeId"
  rules={{ required: "This field is required" }}
  defaultValue={getValues("processTypeId") || null}
  render={({ field }) => (
    <Autocomplete<any>
      {...processTypeProps}
      {...field}
      value={field.value || null}
      onChange={(_, value) => {
        field.onChange(value);
      }}
      // ... rest of your Autocomplete props
    />
  )}
/>

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: ----------------------

kapa.ai•2mo ago

<@665317837656555562> Kapa.ai is still learning and improving, please let me know how I did by reacting below.