inland-turquoise•2mo ago

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.

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}
     />
   )}
 />

2 Replies

kapa.ai•2mo ago

Hi @Vargash. 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 information provided in the knowledge sources and your question, it appears that you're encountering an issue with the MUI Autocomplete component not pre-populating with existing values in an Edit page. This is a known issue that has been reported and addressed in Refine. Let me provide some insights and potential solutions: 1. Default Value Handling: The useAutocomplete hook in Refine has a defaultValue property that should handle pre-populating the Autocomplete component. You're correctly passing this in your code:

const { autocompleteProps: fishesAutocompleteProps } = useAutocomplete({
  resource: "fishes",
  defaultValue: record?.fishes ?? [],
  // ...
});

const { autocompleteProps: fishesAutocompleteProps } = useAutocomplete({
  resource: "fishes",
  defaultValue: record?.fishes ?? [],
  // ...
});

However, there might be a timing issue where the record is not yet available when this hook is called. 2. Ensuring Default Values are Included: Refine's useAutocomplete hook sends a separate query to ensure that the default values are included in the options, even if they're not in the current visible options. This is done using the useMany hook internally. useAutocomplete API Reference mentions: "When the defaultValue property is given, the useMany data hook is called for the selected records. With this property, you can change the options of this query." 3. Multiple Values Handling: The multiple prop on the Autocomplete component changes how the component handles values. Make sure that the defaultValue you're passing is indeed an array of IDs. 4. Potential Solution: You might need to ensure that the record data is available before rendering the Autocomplete component. You can do this by adding a conditional render:

{record && (
  <Autocomplete
    {...fishesAutocompleteProps}
    multiple
    // ... rest of your Autocomplete props
  />
)}

{record && (
  <Autocomplete
    {...fishesAutocompleteProps}
    multiple
    // ... rest of your Autocomplete props
  />
)}

5. Known Issue: There was a reported issue similar to yours where the Autocomplete component wasn't clearing previous search values when used with the multiple prop. This issue has been addressed, so make sure you're using the latest version of Refine. Github Issue: Multiple MUI Autocomplete not clearing previous search value 6. Additional Debugging: To further debug, you could log the fishesAutocompleteProps and record?.fishes to ensure they contain the expected values when the component renders. If the issue persists after trying these suggestions, it might be worth creating a minimal reproducible example and reaching out to the Refine community or opening an issue on their GitHub repository for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

MUI Autocomplete with "multiple" prop not initially populated

Did you find this page helpful?