fix(portals): check the grandparent element if it's dialog plugin #7240…

… (#7243) The root element can be some other dialog
quasarframework · Jun 17, 2020 · c093ce5 · c093ce5
1 parent 1f5e220
commit c093ce5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/ui/dev/src/pages/global/dialog-component-no-parent.js b/ui/dev/src/pages/global/dialog-component-no-parent.js
@@ -7,7 +7,9 @@ export default {
 
   data () {
     return {
-      inc: 0
+      inc: 0,
+      sel: null,
+      options: [ 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5' ]
     }
   },
 
@@ -43,6 +45,30 @@ export default {
           'Custooom: ' + this.text
         ]),
 
+        h('q-card-section', [
+          h('q-select', {
+            props: {
+              label: 'Menu select',
+              color: 'accent',
+              options: this.options,
+              value: this.sel,
+              behavior: 'menu'
+            },
+            on: { input: val => { this.sel = val } }
+          }),
+
+          h('q-select', {
+            props: {
+              label: 'Dialog select',
+              color: 'accent',
+              options: this.options,
+              value: this.sel,
+              behavior: 'dialog'
+            },
+            on: { input: val => { this.sel = val } }
+          })
+        ]),
+
         h('q-card-section', [
           'Reactivity:',
 

diff --git a/ui/dev/src/pages/global/dialog-component-with-parent.js b/ui/dev/src/pages/global/dialog-component-with-parent.js
@@ -20,7 +20,9 @@ export default {
 
   data () {
     return {
-      inc: 0
+      inc: 0,
+      sel: null,
+      options: [ 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5' ]
     }
   },
 
@@ -64,6 +66,30 @@ export default {
           h('test-component')
         ]),
 
+        h('q-card-section', [
+          h('q-select', {
+            props: {
+              label: 'Menu select',
+              color: 'accent',
+              options: this.options,
+              value: this.sel,
+              behavior: 'menu'
+            },
+            on: { input: val => { this.sel = val } }
+          }),
+
+          h('q-select', {
+            props: {
+              label: 'Dialog select',
+              color: 'accent',
+              options: this.options,
+              value: this.sel,
+              behavior: 'dialog'
+            },
+            on: { input: val => { this.sel = val } }
+          })
+        ]),
+
         h('q-card-section', [
           'Reactivity:',
 

diff --git a/ui/src/mixins/portal.js b/ui/src/mixins/portal.js
@@ -136,7 +136,11 @@ export default {
   },
 
   created () {
-    this.__onGlobalDialog = this.$root.$options.name === 'QGlobalDialog'
+    // we cannot check the root component because
+    // we might have portals in portals (vue tree)
+    this.__onGlobalDialog = this.$parent !== void 0 &&
+      this.$parent.$parent !== void 0 &&
+      this.$parent.$parent.$options.name === 'QGlobalDialog'
   },
 
   beforeDestroy () {