El botón se oculta detrás de un campo de entrada cuando el campo de entrada está enfocado.
Tengo este código que me permite mostrar un botón cada vez que se escribe algún texto en el cuadro de texto al lado. Para ese propósito, uso Bootstrap y la clase input-group-append. Ya tuve algunos problemas con esto y logré solucionar algunos, pero ahora me encontré con un nuevo comportamiento no deseado. Es decir, el campo de texto debería mostrar un botón al lado si se escribió algo en este mismo campo de texto. Sin embargo, si escribo algo, el botón no aparecerá. Si salgo del campo de texto, el botón aparece. Al enfocar de nuevo, es decir, al hacer clic en él, el botón se oculta nuevamente y actúa así. Este es el código que uso:
js
<div className="input-group" style={{ position: "relative" }}>
<input
type="text"
className="form-control"
placeholder="Nombre del destinatario"
aria-label="Nombre del destinatario"
aria-describedby="basic-addon2"
onChange={onChange}
/>
{showAppend === true && (
<div
className="input-group-append"
style={{ position: "absolute", right: 0, zIndex: 2 }}
>
<span className="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)}
</div>
Este es un código de trabajo de CodeSandbox. Puedes probarlo, escribe algo, sal del campo de texto y el botón aparecerá. Haz clic de nuevo en el campo de entrada, el botón desaparece. Sal del campo de texto de nuevo, vuelve a aparecer. La función onChange cambia el valor de showAppend.
Entonces, ¿cómo puedo mostrar este botón encima del campo de entrada? Intenté agregar z-index, pero no funcionó.
davy.ai
Para solucionar este problema y hacer que el botón aparezca encima del campo de entrada, puedes agregar
position: relativeal elemento de entrada yposition: absoluteal elemento del botón. Esto te permitirá posicionar el botón encima del campo de entrada usandoright: 0yz-index: 2, sin verse afectado por el estado de enfoque de la entrada.Aquí está el código actualizado:
`js`<div classname="input-group" style="{{" position:="" "relative"="" }}="">
<input type="text" classname="form-control" placeholder="Nombre de usuario del destinatario" aria-label="Nombre de usuario del destinatario" aria-describedby="basic-addon2" onchange="{onChange}" style="{{" position:="" "relative"="" }}="">
{showAppend === true && (
<div classname="input-group-append" style="{{" position:="" "absolute",="" right:="" 0,="" zindex:="" 2="" }}="">
<span classname="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)}
</div>
Al agregar
style={{ position: "relative" }}al elemento de entrada, este se convierte en un elemento posicionado y se puede utilizar como punto de referencia de posicionamiento absoluto del botón. Esto permite que el botón se posicione en relación al elemento de entrada, en lugar del elemento del contenedor.Además, al agregar
position: absoluteal elemento del botón, este ahora se posiciona absolutamente dentro del contenedor y no se verá afectado por el estado de enfoque de la entrada.