How to prevent racing between click and blur event ?

Instead of such hack to fire click before blur event try following solution :

To understand this better you need to know this Order in which specific event fires:

1. mouse down
2. blur
3. mouse up
4. click

You can use this order to work in your favor in this case.

Try using Mousedown event instead and that will fire before blur event.

Also, try running this code snippet. It will help you understand the above order

    Type first in text box below and then click button <br/>
    <input type='text' onblur="console.log('blur');" />

    <button onclick="console.log('click')" 
      onmouseup="console.log('mouseup')" 
      onmousedown="console.log('mousedown')" > Type first and then this click button</button>

According to this example you can also use e.preventDefault on mouseDown event : https://codepen.io/mudassir0909/pen/eIHqB (he used jquery but it should be the same with an other lib)