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

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

Answer 1

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.

Answer 2

.quill-editor {
user-select: auto !important;
-moz-user-select: auto !important;
-webkit-user-select: auto !important;
-ms-user-select: auto !important;
}
Try it. It works for me.