fix: double-click in modal unexpectedly going back in browser history #…

…945
quasarframework · Oct 2, 2017 · 0717372 · 0717372
1 parent 0431c42
commit 0717372
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/dev/components/components/modal.vue b/dev/components/components/modal.vue
@@ -59,6 +59,7 @@
     <q-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
       <q-modal-layout>
         <q-toolbar slot="header">
+          <q-icon style="font-size: 500%" class="cursor-pointer" name="map" @click="closeMe" />
           <q-btn flat @click="$refs.layoutModal.close()">
             <q-icon name="keyboard_arrow_left" />
           </q-btn>
@@ -146,6 +147,11 @@ export default {
       this.$nextTick(() => {
         this.$refs.positionModal.open()
       })
+    },
+    closeMe () {
+      console.log('click')
+      this.$refs.layoutModal.close()
+      this.$refs.layoutModal.close()
     }
   }
 }

diff --git a/src/components/modal/QModal.vue b/src/components/modal/QModal.vue
@@ -111,7 +111,8 @@ export default {
   },
   data () {
     return {
-      active: false
+      active: false,
+      toggleInProgress: false
     }
   },
   computed: {
@@ -155,10 +156,11 @@ export default {
   },
   methods: {
     open (onShow) {
-      if (this.active) {
+      if (this.active || this.toggleInProgress) {
         return
       }
 
+      this.toggleInProgress = true
       const body = document.body
 
       body.appendChild(this.$el)
@@ -199,6 +201,7 @@ export default {
           if (typeof this.__onClose === 'function') {
             this.__onClose()
           }
+          this.toggleInProgress = false
           this.__updateModel(false)
           this.$emit('close')
         }, duration)
@@ -225,15 +228,17 @@ export default {
         if (typeof onShow === 'function') {
           onShow()
         }
+        this.toggleInProgress = false
         this.__updateModel(true)
         this.$emit('open')
       }, duration)
     },
     close (onClose) {
-      if (!this.active) {
+      if (!this.active || this.toggleInProgress) {
         return
       }
 
+      this.toggleInProgress = true
       this.__onClose = onClose
 
       if (!Platform.has.popstate) {