Buenas noches, estoy tratando de resolver un problema donde se restablece el valor de autocompletar. Esto sucede cuando cambio el estado de la interfaz de usuario (ejemplo en sandbox). Quiero que el valor siga ahí, si un usuario decide volver atrás y cambiarlo. No sé por qué el autocompletar reacciona de esa manera, pero no he encontrado una solución.
¿Alguna sugerencia de cómo resolver esto?
Enlace: https://codesandbox.io/s/sharp-diffie-6ikc6?file=/index.js
Debe utilizar la versión controlled de la función de autocompletar. El problema es causado por la devolución de llamada onInputChange , que se activó no solo para seleccionar la opción. En su caso, React elimina el autocompletado de DOM (debido a su switch ) y se onInputChange con un valor vacío, por lo que su estado cambia a una cadena vacía.
Para evitar esto, debe usar value y onChange en su lugar. onChange se activa solo si cambia la opción.
const [value, setValue] = useState(null); <Autocomplete value={value} disablePortal id="combo-box-demo" options={movies.sort( (a, b) => -b.distributor.localeCompare(a.distributor) )} onChange={onInputChange} groupBy={(option) => option.distributor} getOptionLabel={(option) => option.movie} sx={{ width: "100%", paddingRight: 2 }} renderInput={(params) => ( <TextField style={{ backgroundColor: "#fff", marginLeft: 25 }} {...params} label="Movie" /> )} selectOnFocus={false} />Échale un vistazo: https://codesandbox.io/s/peaceful-shamir-r2dwi?file=/index.js