Vue: nextTick and eventPropogation Issue

[robertmoura]

Version

2.6.3

Reproduction link

https://codesandbox.io/s/qx992r339j

Steps to reproduce

Click the open modal button.

What is expected?

The text should display. When you click anywhere other than the text it should be removed.

What is actually happening?

The text flashes on and then off.

---

The nextTick edge case described in https://gist.github.com/yyx990803/d1a0eaac052654f93a1ccaab072076dd doesn't seem to be completely fixed.

[posva]

as a workaround you can use .stop to stop the propagation of the event

[LinusBorg]

or add the listener later:

    open() {
      this.showing = true
      window.setTimeout(() => {
        document.addEventListener('click', this.blur)
      }, 0)
    },

[yyx990803]

This is is because the handler is added manually by you, not by Vue. And the event listeners is added to the document. There is nothing we can do about this case.