AutoComplete only selects value if I click on the dropdown suggestion

Question

 <Autocomplete
 disablePortal
 id="geo-select-country"
 options={all_country}
 defaultValue={nation}
 onChange={(event, selected_nation) => {
 set_nation(selected_nation);
 }}
 classes={autocomplete_classes}
 renderInput={(params) => (
 <TextField {...params} label={"Country"} margin="none" focused />
 )}
 />

For example, if I type out "United States" and then click enter or click away, nothing will be selected. I would have to click on the dropdown suggestion for "United States" in order for it to be selected.

Why do I fix this?

EDITED:

Here is a live example:

https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.js

Values can only be selected if you actually click them in the dropdown. Even if you type the value exactly as it is suggested and then click enter, it will not be selected.

• Saeed Shamloo: how about using it with autoHighlight={true} prop ?
• Bear Bile Farming is Torture: This worked if ENTER is pressed. But if I click outside of the AutoComplete after typing a valid value, it will be discarded. What is the fix for the later?
• Saeed Shamloo: I think autoSelect={true} will solve later problem
• Bear Bile Farming is Torture: both worked, thanks
• Saeed Shamloo: You're welcome, Is it ok to post it as answer?

Answer 1

To solve selecting value by pressing Enter, you can use autoHighlight={true} prop and also in order to solve the clicking outside issue, you can use autoSelect={true} with Autocomplete.