Having an issue with a code setup where a button should appear when text is entered into a textbox using Bootstrap and the input-group-append class. The button is not showing up as expected - it only appears when the textbox loses focus. Here's the code snippet:
<div className="input-group" style={{ position: "relative" }}>
<input
type="text"
className="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
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>
This working example on CodeSandbox demonstrates the issue. How can I make sure the button shows up properly above the input field?
I've tried adjusting the z-index, but it hasn't resolved the problem.