Estoy tratando de hacer una forma bastante básica con React que tenga algunas entradas y un botón de enviar. Cuando se presiona el botón Enviar, se supone que una pantalla de carga que es básicamente un div con opacidad 0.9 cubre la pantalla. Si el formulario se completa usando el autocompletado (o el autocompletado, el que sea en el que el navegador complete el formulario completo para usted), las entradas en el formulario no están cubiertas por la pantalla de carga, y puedo editarlas como si estuvieran en parte superior del div. Aquí hay un ejemplo del problema. ingrese la descripción de la imagen aquí

Si autocompleto el formulario y luego edito una de las entradas manualmente, esa entrada estará cubierta por el div mientras el resto todavía está encima. No estoy seguro de cuál es el problema o si incluso se puede solucionar, pero se agradece cualquier ayuda. Aquí está el codepen si quieres probarlo.

const App = ()={amp}gt;{ const [loading, changeLoading] = React.useState(false) const submit = (e) ={amp}gt;{ e.preventDefault(); e.stopPropagation; changeLoading(true); } return( {amp}lt;div{amp}gt; {loading {amp}amp;{amp}amp; {amp}lt;div className = 'loading'{amp}gt; {amp}lt;h1{amp}gt;Loading...{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt;} {amp}lt;form autocomplete = 'on' onSubmit = {submit}{amp}gt; {amp}lt;label forHtml = 'name'{amp}gt;Name{amp}lt;/label{amp}gt; {amp}lt;input name = 'name' id = 'name' autocomplete = 'name' /{amp}gt; {amp}lt;label forHtml = 'email'{amp}gt;Email{amp}lt;/label{amp}gt; {amp}lt;input name = 'email' id = 'email' autocomplete = 'email' /{amp}gt; {amp}lt;label forHtml = 'tel'{amp}gt;Phone{amp}lt;/label{amp}gt; {amp}lt;input name = 'tel' id = 'tel' autocomplete = 'tel' /{amp}gt; {amp}lt;input type = 'submit' onClick = {submit}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; ) } 

Este problema no parece ocurrir cuando uso Chrome.

Esto se resolvió muy fácilmente simplemente agregando

 z-index:1 

a la carga div.