Element click doesn’t fire when the element gets hidden

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

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');

txt.onblur      = () => {console.log("Textarea blur fired")}
txt.onfocus     = () => {console.log("Textarea focus fired")}

btn.onclick     = () => {console.log("Button onClick 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>