Element click doesn't fire when the element gets hidden

Question

I have a blur event on a text input that toggles on a button (renders it with React). When you click on the button, the blur event fires on the text input which removes the button from the DOM, but the button click event is not fired. I tried wrapping the code that removes the button from the DOM in a 100ms timeout and it works but feels hacky, is there a better way?

Here's the gist of the code:

const blurHandler = e => {
  setShowInput(false); //this prevents buttonHandler from being fired

  // setTimeout(() => setShowInput(false), 100); // this works with 100ms, but not with 50ms for example
}

const buttonHandler = e => {
  console.log('Button clicked!');
}

const focusHandler = e => {
  setShowInput(true);
}

return (
  <div>
    <input type="text" onFocus={focusHandler} onBlur={blurHandler} >
    {showInput && <button onClick={buttonHandler}>Apply to all</button>}
  </div>
)

Answer 1

This is easy, you just need to use a different event trigger. onClick is too late, it won't fire until after the textarea blur happens, but onMouseDown will fire before it:

 const btn = document.getElementById('btn'); const txt = document.getElementById('txt'); btn.onclick=()=> { console.log("button onClick fired"); } txt.onblur = () => { console.log("Textarea blur fired") } btn.onmousedown = () => { console.log("Button Mousedown fired"); } btn.onmouseup = () => { console.log("Button Mouseup fired"); }

 <textarea id = "txt">Focus me first</textarea> <button id="btn">Click me next</button>

Answer 2

Since you conditionally render the button with:

{showInput && <button onClick={buttonHandler}>Apply to all</button>}

As soon as you set showInput to a falsy value, it gets removed from the DOM. You have couple of options:

Option 1 (If you don't have to remove the button from the DOM)

return (
  <div>
    <input type="text" onFocus={focusHandler} onBlur={blurHandler} >
    <button style={{opacity: showInput ? 1 : 0}} onClick={buttonHandler}>Apply to all</button>}
  </div>
)

Setting opacity 0 will hide the button, but won't remove it from the dom.

Option 2 (If you have to remove the button from the DOM)

const btnClickedRef = useRef(false)

const buttonHandler = e => {
  console.log('Button clicked!');
  btnClickedRef.current = true
}

return (
  <div>
    <input type="text" onFocus={focusHandler} onBlur={blurHandler} >
    {showInput && btnClickedRef.current && <button onClick={buttonHandler}>Apply to all</button>}
  </div>
)