如果我点击下拉建议，自动完成只会选择值

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 />
          )}
        />

例如，如果我输入“美国”，然后点击回车或点击离开，则不会选择任何内容。我必须点击“美国”的下拉建议才能被选中。

我为什么要解决这个问题？

已编辑：

这是一个活生生的例子：

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

只有当您在下拉列表中实际单击它们时，才能选择值。即使您完全按照建议输入值然后单击回车，它也不会被选中。

Answer 1

为了解决按Enter选择值，可以使用autoHighlight={true}属性，同时为了解决点击外部问题，可以使用autoSelect={true}和Autocomplete.

如果我点击下拉建议，自动完成只会选择值

AutoComplete only selects value if I click on the dropdown suggestion

javascript

autocomplete

textfield

reactjs

material-ui