Struggling to configure Material Autocomplete to automatically select the initially loaded option. Despite being new to React, I've been trying out the following code:
export default function AsyncPicker({name, formik, initialOptions = []}) {
const [options, setOptions] = useState(initialOptions);
useEffect(() => {
setOptions(initialOptions);
},[initialOptions])
return (
<Autocomplete
....otherProps
options={options}
value={{id:formik.values[name]}}
getOptionSelected={(option, value) => option.id === value.id}
/>
)
}
The options load asynchronously when typing, but for the initial option, I want to display a single option based on the record value. In the parent component, I render the Autocomplete with an initialOptions array that starts empty by default. As data is asynchronously loaded for the given record, initialOptions gets updated to match the record's value. The child control updates with the options, the option renders, but it doesn't auto-select.
The getOptionSelected function does trigger when initialOptions are updated and the ids of the option and value match. So why isn't it automatically selected?
Feel free to point out if I'm completely off track as I just started learning React two weeks ago!