How to prevent racing between click and blur event ?

Question

my Angular code look like this >

<input type='text' (blur)='saveData()'>
<button (click)='navigateToPage2()'>

Jumping from textbox being focused to the button click, there is racing condition between two events.

Problem is button click gets ignored because the blur event fires first and brings the spinner on the screen while its making server call to save data.

How do I solve this exact problem?

Is there a hack to make click event fire before blur event ?

Answer 1

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>

Answer 2

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)