Next.js Discord

Discord Forum

MUI: The value provided to Autocomplete is invalid.

Answered
Swedish Lapphund posted this in #help-forum
Open in Discord
Swedish LapphundOP
So I get the following warning
Answered by Swedish Lapphund
Well, I fixed the issue.
        isOptionEqualToValue={(option, value) => {
          return option.id === value.id;
        }}
View full answer

9 Replies

Swedish LapphundOP
<Autocomplete
        fullWidth
        multiple
        id="disabilities"
        options={Object.values(disabilitiesData)}
        getOptionLabel={(option) => option.name}
        onChange={(_, value) => handleChange("disabilities", value)}
        value={formData.disabilities}
        disableCloseOnSelect
        renderInput={(params) => (
          <TextField
            {...params}
            label="Beperkingen"
            variant="outlined"
            margin="normal"
            fullWidth
          />
        )}
        renderTags={(tagValue, getTagProps) => {
          return tagValue.map((option, index) => (
            <Chip {...getTagProps({ index })} key={option.id} label={option.name} />
          ));
        }}
      />
      <Autocomplete
        fullWidth
        multiple
        id="assistanceTools"
        options={Object.values(assistanceToolsData)}
        getOptionLabel={(option) => option.name}
        onChange={(_, value) => handleChange("assistanceTools", value)}
        value={formData.assistanceTools}
        disableCloseOnSelect
        renderInput={(params) => (
          <TextField
            {...params}
            label="Hulpmiddelen"
            variant="outlined"
            margin="normal"
          />
        )}
        renderTags={(tagValue, getTagProps) => {
          return tagValue.map((option, index) => (
            <Chip {...getTagProps({ index })} key={option.id} label={option.name} />
          ));
        }}
      />
so I think the issue lies here:
value={formData.disabilities}
I've printed out:
  console.log("Options:", Object.values(assistanceToolsData));
  console.log("tool:", formData.assistanceTools);


to showcase the options Object.values(assistanceToolsData) vs the options its assigned: formData.assistanceTools (can be null, but when its null it works just fine without warning)
they are the same size, they match the same props
its just not matching, I dont know why..
Swedish LapphundOP
Well, I fixed the issue.
        isOptionEqualToValue={(option, value) => {
          return option.id === value.id;
        }}
Answer