I'm using Material-UI 5 AutoComplete component and I have a warning I can't handle.
The code:
<Autocomplete
disableClearable
options={options}
value={{ displayName: selectedName || "" }}
getOptionLabel={(option) => option.displayName || ""}
onChange={onSelectChange.bind(null, selectedName)}
isOptionEqualToValue={(option, selected) =>
option.displayName === selected.displayName
}
renderOption={(props, option) => (
<li {...props}>
<Typography>{option.displayName}</Typography>
</li>
)}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder={placeholder}
/>)}
/>
The warning:
useAutocomplete.js:220 MUI: The value provided to Autocomplete is invalid.
None of the options match with `{"displayName":""}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.
Every option is an object with a displayName field, (eg: {displayName})
I saw some posts about it but nothing helped. I'm using a controlled component(value prop) and at the first render the selectedName is empty So I'm getting the error before I'm selecting an item from the list.
Maybe there should be a check in isOptionEqualToValue to check value of selected? Similar like this:
isOptionEqualToValue={(option, value) => {
if (value === "" || value === option)
return true;
}}
Actually to check displayName.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.