<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 /> )} />Por ejemplo, si escribo "Estados Unidos" y luego hago clic en Intro o hago clic fuera, no se seleccionará nada. Tendría que hacer clic en la sugerencia desplegable de "Estados Unidos" para que se seleccione.
¿Por qué arreglo esto?
EDITADO:
Aquí hay un ejemplo en vivo:
https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.js
Los valores solo se pueden seleccionar si realmente hace clic en ellos en el menú desplegable. Incluso si escribe el valor exactamente como se sugiere y luego hace clic en Intro, no se seleccionará.
Para resolver el valor de selección presionando Enter , puede usar autoHighlight={true} prop y también para resolver el problema del clic externo, puede usar autoSelect={true} con Autocomplete .