Quill.js doesn't work properly in a Vuetify v-dialog

Question

I'm trying to use a Quill.js editor inside a Vuetify v-dialog, but the toolbar dropdowns are not closed when the user clicks outside the current opened dropdown.

I made a js Fiddle: https://jsfiddle.net/6d7bef5n/

<div id="app">
  <v-app>
     <quill-editor v-model="content"></quill-editor>
     <v-dialog v-model="dialog">
        <quill-editor v-model="contentKo"></quill-editor>
      </v-dialog>
     <v-btn @click.stop="dialog = !dialog">Open Quill in a Modal</v-btn>
  </v-app>
</div>

Vue.use(VueQuillEditor)

Vue.use(VueQuillEditor)
new Vue({
  el: "#app",
  data() {
    return {
      content: "I'm OK",
      contentKo: "I'm Wrong, Toolbar dropdowns are not closing on blur",
      dialog: false
    }
  }
});

It seems that the v-dialog component does something wrong on the events inside his content slot, probably for the open/close behavior, but didn't found what.

Thanks

@ MarlburroW I have the same issue with a custom select component I made. When I use it within a Vuetify dialog it does not close its dropdown when I click outside of it. Did you find a solution for your issue? — Christophe Geers
No :(, I think this is caused by a removed eventListener when the v-dialog is activated (probably a blur or a focus event), I don't really know, I've to investigate more in the vuetify codebase: github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/… — MarlburroW
I found the cause of my issue, it is caused by this line: github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/… If I remove this line, my dropdown is correctly closed when I click outside of it. But remove this line may probably cause unwanted side effect. — MarlburroW
Yup, commenting that line of code solves my issue too. Then the click event propagates and my directive / component receives it. — Christophe Geers

Christophe Geers Christophe Geers · Accepted Answer · 2019-05-18T10:37:56

As @MarlburroW pointed out Vuetify's VDialog components stops the propagation of the click event when the user clicks inside of the dialog.

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L284

In my case I had a custom directive which detects clicks outside of the target element, for example for a dropdown component. This worked, but if you used such a component inside of Vuetify's dialog the custom directive would not work, because the VDialog stopped propagation of the click event.

Vuetify has its own outside click directive which they use for menus, selects...etc. It does not suffer from this issue.

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/click-outside.ts

I had a look at the differences between Vuetify's directive and my own and the reason it works is that they use capturing instead of bubbling for the event listener.

The following codepen demonstrates it:

https://codepen.io/geersch/pen/LoLgYK

onClick = function (e) { console.log('The click event bubbled up.'); };

document.body.addEventListener('click', onClick, { capture: true });
// document.body.addEventListener('click', onClick, { capture: false });

dialog = document.querySelector('#dialog');
dialog.addEventListener('click', function (e) {
    e.stopPropagation();
});

So I just changed my directive to use capturing too.

Quill.js doesn't work properly in a Vuetify v-dialog

2 Answers