Seems that onBlur of one element is “overriding” the onclick of another

Question

I have two elements:

Answer 1

The solution is so simple - you just need to use the mousedown event instead of the click event.

The order of the events is:

1. mousedown - of the div element which you wanted to use in its click event

2. blur - of the other element, that your logic is inside.

3. click - of the div element

You can save a flag in the mousedown event and then, in the onBlur logic, check the flag to know if need to call the click function manually

submitDown() {
  saveCalled = true;
}
do(){
....
  if(saveCalled){
     saveCalled = false;
     save();
  }
}