AutoComplete only selects value if I click on the dropdown suggestion

January 5, 2022

        <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.

>Solution :

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.