fix(portals): check if showing portal before delayed hiding; fix page…

… background in dialogs #8

#8

ui/dev/src/pages/web-tests/portal-show-hide.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="q-layout-padding">
+    <div class="q-pa-md q-gutter-sm">
+      <q-btn label="Open dialog" color="primary" @click="openDialog"></q-btn>
+      <q-btn label="Open menu" color="primary" @click="openMenu"></q-btn>
+
+      <q-dialog v-model="dialogModel">
+        <q-card>
+          <q-card-section>
+            <div class="text-h6">Dialog</div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none">
+            Click the button below to relaunch this dialog
+          </q-card-section>
+
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Relaunch" @click="relaunchDialog"></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+
+      <div>
+        <q-menu v-model="menuModel">
+          <q-card>
+            <q-card-section>
+              <div class="text-h6">Menu</div>
+            </q-card-section>
+
+            <q-card-section class="q-pt-none">
+              Click the button below to relaunch this menu
+            </q-card-section>
+
+            <q-card-actions align="right" class="text-primary">
+              <q-btn flat label="Relaunch" @click="relaunchMenu"></q-btn>
+            </q-card-actions>
+          </q-card>
+        </q-menu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogModel: false,
+      menuModel: false
+    }
+  },
+  methods: {
+    openDialog () {
+      this.dialogModel = true
+    },
+    closeDialog () {
+      this.dialogModel = false
+    },
+    relaunchDialog () {
+      this.closeDialog()
+
+      if (this.delayDialog < 0) {
+        this.delayDialog = 0
+        console.log('nextTick dialog')
+        this.$nextTick(() => {
+          this.openDialog()
+        })
+      }
+      else {
+        console.log('setTimeout dialog', this.delayDialog)
+        setTimeout(() => {
+          this.openDialog()
+        }, this.delayDialog++)
+      }
+    },
+
+    openMenu () {
+      this.menuModel = true
+    },
+    closeMenu () {
+      this.menuModel = false
+    },
+    relaunchMenu () {
+      this.closeMenu()
+
+      if (this.delayMenu < 0) {
+        this.delayMenu = 0
+        console.log('nextTick menu')
+        this.$nextTick(() => {
+          this.openMenu()
+        })
+      }
+      else {
+        console.log('setTimeout menu', this.delayMenu)
+        setTimeout(() => {
+          this.openMenu()
+        }, this.delayMenu++)
+      }
+    }
+  },
+
+  created () {
+    this.delayDialog = -1
+    this.delayMenu = -1
+  }
+}
+</script>

ui/src/components/dialog/QDialog.js

@@ -240,16 +240,20 @@ export default Vue.extend({
     },
 
     __onTransitionBeforeLeave () {
-      this.__focusCyclePortal(true)
-      this.seamless !== true && (document.documentElement.scrollTop = 0)
+      if (this.showing !== true) {
+        this.__focusCyclePortal(true)
+        this.seamless !== true && (document.documentElement.scrollTop = 0)
+      }
     },
 
     __onTransitionAfterLeave (target) {
-      this.__hidePortal()
+      if (this.showing !== true) {
+        this.__hidePortal()
 
-      this.seamless !== true && this.__preventScroll(false)
+        this.seamless !== true && this.__preventScroll(false)
 
-      this.$emit('hide', { target })
+        this.$emit('hide', { target })
+      }
     },
 
     __onAutoClose (e) {

ui/src/components/menu/QMenu.js

@@ -223,8 +223,10 @@ export default Vue.extend({
       this.$el.dispatchEvent(create('popup-hide', { bubbles: true }))
 
       this.__setTimeout(() => {
-        this.__hidePortal()
-        this.$emit('hide', evt)
+        if (this.showing !== true) {
+          this.__hidePortal()
+          this.$emit('hide', evt)
+        }
       }, 300)
     },
 

ui/src/components/tooltip/QTooltip.js

@@ -114,8 +114,10 @@ export default Vue.extend({
       this.__anchorCleanup()
 
       this.__setTimeout(() => {
-        this.__hidePortal()
-        this.$emit('hide', evt)
+        if (this.showing !== true) {
+          this.__hidePortal()
+          this.$emit('hide', evt)
+        }
       }, 300)
     },
 

ui/src/mixins/prevent-scroll.js

@@ -67,6 +67,7 @@ function apply (action, rtl) {
 
     requestAnimationFrame(() => {
       const { innerHeight, innerWidth } = window
+      const { overflowX, overflowY, backgroundColor } = window.getComputedStyle(body)
 
       state = {
         htmlStyleBefore: documentElement.style.cssText,
@@ -93,7 +94,6 @@ function apply (action, rtl) {
       else {
         const
           { scrollWidth, scrollHeight } = body,
-          { overflowX, overflowY, backgroundColor } = window.getComputedStyle(body),
           scrollbarSizeHoriz = overflowX !== 'hidden' && (overflowX === 'scroll' || scrollWidth > innerWidth)
             ? scrollbarSize
             : 0,
@@ -112,8 +112,6 @@ function apply (action, rtl) {
           if (scrollbarSizeHoriz > 0) {
             documentElement.style.height = `calc(100vh - ${scrollbarSizeHoriz}px)`
           }
-
-          documentElement.style.backgroundColor = backgroundColor || 'rgba(128, 128, 128, 0.01)'
         }
 
         body.style.width = `calc(100vw + ${Math.abs(state.scrollLeft) - scrollbarSizeVert}px)`
@@ -124,6 +122,7 @@ function apply (action, rtl) {
       body.style.top = `${-state.scrollTop}px`
       body.style['padding' + (rtl === true ? 'Left' : 'Right')] = `${Math.abs(state.scrollLeft)}px`
 
+      documentElement.style.backgroundColor = backgroundColor || 'rgba(128, 128, 128, 0.01)'
       documentElement.classList.add('q-body--prevent-scroll')
 
       window.scrollTo(0, 0)