Dialog plugin bug, with this.$q.dialog, generate error "[Vue warn]: Error in mounted hook: "TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event.""

[renaudham]

Describe the bug
Dialog plugin bug, with this.$q.dialog,
when calling the this.$q.dialog,
generate Console error when it's showing
But the diaolog works...

[Vue warn]: Error in mounted hook: "TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event."

(found in <Root>) vue.runtime.esm.js:619
    VueJS 10
    default global-dialog.js:73

Using latest VueJs and Quasar of past 3 weeks.
Quasar CLI
Pkg quasar........ v1.13.2
Pkg @quasar/app... v2.0.9
Dev mode.......... spa
Transpiled JS..... yes (Babel) - includes IE11 support

used in a component Layout
methods
removeObject (id) {
this.$q.dialog({
title: 'Supprimer ?',
color: 'orange',
icon: 'warning',
message: 'Voulez-vous vraiment supprimer cet objet ?',
cancel: true,
persistent: true
}).onOk(data => {
console.log('removeObject onOk')
console.log('removeObject id', id)
this.doActions.removeObject = id
}).onCancel(() => {
console.log('removeObject onCancel')
}).onDismiss(() => {
// console.log('I am triggered on both OK and Cancel')
})
}

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/renaudham/pen/xxVNJoo
but here the bug doesnt appears

To Reproduce
Steps to reproduce the behavior:

1. As soon as a method calling the this.$q.dialog({
   the bug appears in CONSOLE only

It's repeating on hiding, cancel or Ok
with another console error
TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event.
__hide QDialog.js:262
__processHide model-toggle.js:110
hide model-toggle.js:95
hide DialogPlugin.js:121

Expected behavior
having no console warning

Screenshots

Platform (please complete the following information):
OS: Windows 10 latest
Node: Using Quasar CLI
NPM: npm@6.1.0
Yarn: -
Browsers: Firefox or Chrome, latest
iOS: -
Android: -
Electron: -

Additional context

[rstoenescu]

Hi,

I cannot reproduce it with the codepen that you supplied (?!).

[renaudham]

Hi

Yes as I noted above, the issue is not visible on codepen, but the code is the same

Probably due to the config, or I don't know.
Buit I guess somebody already had such thing before.

It's also visible here with current version
http://urbikub.bod-demo.fr/plan
When you clikc on left menu link "Supprimer tous mes objets & remettre à zéro"
But there it's the build, hard to see

And we can see in the console that it's related to this, in dev mode

[Vue warn]: Error in mounted hook: "TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event."

(found in <Root>) vue.runtime.esm.js:619
    VueJS 10
    default global-dialog.js:73

in global-dialog.js

 let vm = new Vue({
      name: 'QGlobalDialog',

      el: node,
      parent: parent === void 0 ? root : parent,

      render (h) {
        return h(DialogComponent, {
          ref: 'dialog',
          props,
          attrs,
          on
        })
      },

      mounted () {
        this.$refs.dialog.show()
      }
    })

[rstoenescu]

No one had this before (and it's years since the Dialog plugin exists).
Can you share your repo or at least try to make a barebones reproduction repo of the problem? Or share it with me on Discord (https://chat.quasar.dev).

The intuition says "look, there's a problem there on line number X. fix the code there". But the bigger picture is that this shouldn't happen at all and might reveal something else -- the real root cause. But without being able to reproduce this, it's impossible to help.

[renaudham]

Hi

Thanks.
Let's try discord, I have a git repo

[rstoenescu]

For some reason, in your scenario, HTMLElement.dispatchEvent( new Event(...) ) triggers Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'." even though the new Event(..) is obviously an instance of Event.

Using CustomEvent instead of Event.

Will be available in Quasar v1.14.1.