Tengo un formulario de autocompletado de IU de material en un componente React. Funciona perfectamente, excepto que la tecla ENTER actualmente está borrando el campo de entrada. Simplemente quiero que el campo de entrada no se borre cuando el usuario presiona la tecla ENTER . Busqué en todas las preguntas similares en Stackoverflow, y ninguna de ellas trata de ignorar esta clave dentro de un formulario de Autocompletar (en su mayoría se ocupan de formularios de entrada regulares). A continuación enumero todas las cosas que he probado que no funcionan.

¿Cómo puedo desactivar la tecla ENTER en esta situación?

He intentado ignorar la tecla Intro como:

 onKeyPress={(event) => {return event.key !== 'Enter';}}

También he intentado evitar que la tecla de entrada de autocompletar se tome como un envío de formulario (con la esperanza de que no borre el formulario) haciendo esto:

 onKeyPress={(event) => { if (event.key === 'Enter') { event.preventDefault(); return false; } }

Incluso probé:

 onKeyPress={(event) => { if (event.key === 'Enter') { event.stopPropagation(); return false; } }

Y sí, también intenté usar onKeyDown en lugar de onKeyPress para los dos ejemplos anteriores.

Finalmente, intenté usar la opción disableClearable en el componente Autocompletar como se muestra a continuación:

 const onInputChange = useCallback( (_event: ChangeEvent<{}>, newInputValue: string) => { debounceFetchData(newInputValue); }, [debounceFetchData] ); return ( <section className={classes.container}> <SearchIcon className={classes.icon} /> <Autocomplete id="search" options={options} disableClearable getOptionLabel={() => ''} filterOptions={(x) => x} fullWidth freeSolo onInputChange={onInputChange} renderInput={(params) => ( <TextField {...params} placeholder="Search" variant="outlined" size="small" inputProps={{ ...params.inputProps, 'aria-label': 'Search', }} /> )} ... ... ... />