feat(ClickOutside): do not close menus opened below non-seamless dialogs on pointer interaction in dialog (quasarframework#8046)

Author: pdanpdan

ui/src/components/dialog/QDialog.js

@@ -334,7 +334,7 @@ export default Vue.extend({
 
     __renderPortal (h) {
       return h('div', {
-        staticClass: 'q-dialog fullscreen no-pointer-events',
+        staticClass: 'q-dialog fullscreen no-pointer-events ' + (this.useBackdrop === true ? 'q-dialog--modal' : 'q-dialog--seamless'),
         class: this.contentClass,
         style: this.contentStyle,
         attrs: this.qAttrs

ui/src/components/menu/ClickOutside.js

@@ -10,6 +10,16 @@ const
     focus: []
   }
 
+function hasModalsAbove (node) {
+  while ((node = node.nextElementSibling) !== null) {
+    if (node.classList.contains('q-dialog--modal')) {
+      return true
+    }
+  }
+
+  return false
+}
+
 function execHandlers (list, evt) {
   for (let i = list.length - 1; i >= 0; i--) {
     if (list[i](evt) === void 0) {
@@ -51,6 +61,7 @@ export default {
           // directives that prevent click by using pointer-events none generate click on html element
           target !== document.documentElement &&
           target.classList.contains('no-pointer-events') === false &&
+          hasModalsAbove(el) !== true &&
           (
             ctx.toggleEl === void 0 ||
             ctx.toggleEl.contains(target) === false