How to select default option in Material-UI Autocomplete component dynamically? - reactjs

Question

I am looking for a way to pre-set a default option in a Autocomplete component, just when the ajax call completes loading the list of options.
So the use case would be this: when the user opens the page, in the background a list of options would be loaded into state from the ajax response. I want to select the first retrieved option from the list, as soon as it gets loaded. Currently, I just have a basic way to offer a list of options:
<Autocomplete
options={defaultProps.options}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
/>
but don't know to select the first one when it gets loaded.

Answer 1

I'm using useEffect to demonstrate an ajax request on component mount.
You can use the value property to set the value after the component has been rendered.
While waiting for the ajax request to resolve, you can use the loading prop to change the component mode to loading
const [options, setOptions] = useState([]);
const [def, setDef] = useState(null);
useEffect((()=>{
setTimeout(()=>{
const tempArr = [{name:'Subject'},{name:'Another Subject'}];
setOptions(tempArr);
setDef(tempArr[0]);
}, 1000);
}), []);
return (
<div className="App">
<h1>Autocomplete</h1>
{<Autocomplete
options={options}
loading={!def}
value={def}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
/>}
</div>
);

Answer 2

In latest version of Material UI theres an autoHighlight prop.
<Autocomplete
options={defaultProps.options}
getOptionLabel={option => option.name}
renderInput={params => (
<TextField {...params} variant="outlined" fullWidth />
)}
autoHighlight // add this
/>
See the API for Autocomplete