Vue: Event dispatching is not done in the right order?

[julianxhokaxhiu]

Vue.js version

1.0.26

Reproduction Link

http://codepen.io/anon/pen/akjNbW

Steps to reproduce

1. Click on the input
2. Try to click the button
   

   What is Expected?

A click event to be fired, and then the blur to continue.

What is actually happening?

A blur event is called and the click event is disposed.

---

I have no really idea if this is related to Vue or how the Browser handles the event delegations. Although I tested this with Firefox, Chrome, IE and Edge, they ALL behaviored the same.

Any clue would be highly appreciated.
Thanks in advance.

[dottorblaster]

This is an interesting question.
I think the click-related keydown triggers the blur on the input even before that the click event is fired.

Tricky.

[simplesmiler]

This is a standard behavior of the browser. You might want to listen for the mousedown event instead.

A proper way would be to use more complicated logic:

• Give the button a moment to disappear after the input blur.
• Force the button to be visible if the button itself is focused.

[julianxhokaxhiu]

mousedown event is enough I think, thank you very much @simplesmiler !