From fbd9b0b9f75f98e294db007f8b8a033968db1f88 Mon Sep 17 00:00:00 2001
From: Jasper Zonneveld <jasper@swis.nl>
Date: Thu, 15 Feb 2018 15:08:07 +0100
Subject: [PATCH] Added extra wrapper div to listen to background click events,
 fixes #162

---
 src/Modal.vue | 53 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/Modal.vue b/src/Modal.vue
index d7692a4..4946123 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -4,26 +4,28 @@
          ref="overlay"
          :class="overlayClass"
          :aria-expanded="visible.toString()"
-         :data-modal="name"
-         @mousedown.stop="onBackgroundClick"
-         @touchstart.stop="onBackgroundClick">
-      <div class="v--modal-top-right">
-        <slot name="top-right"/>
-      </div>
-      <transition :name="transition">
-        <div v-if="visibility.modal"
-             ref="modal"
-             :class="modalClass"
-             :style="modalStyle"
-             @mousedown.stop
-             @touchstart.stop>
-          <slot/>
-          <resizer v-if="resizable && !isAutoHeight"
-                   :min-width="minWidth"
-                   :min-height="minHeight"
-                   @resize="onModalResize"/>
+         :data-modal="name">
+      <div :class="backgroundClickClass"
+           @mousedown.stop="onBackgroundClick"
+           @touchstart.stop="onBackgroundClick">
+        <div class="v--modal-top-right">
+          <slot name="top-right"/>
         </div>
-      </transition>
+        <transition :name="transition">
+          <div v-if="visibility.modal"
+               ref="modal"
+               :class="modalClass"
+               :style="modalStyle"
+               @mousedown.stop
+               @touchstart.stop>
+            <slot/>
+            <resizer v-if="resizable && !isAutoHeight"
+                     :min-width="minWidth"
+                     :min-height="minHeight"
+                     @resize="onModalResize"/>
+          </div>
+        </transition>
+      </div>
     </div>
   </transition>
 </template>
@@ -359,6 +361,12 @@ export default {
         scrollable: this.scrollable && this.isAutoHeight
       }
     },
+    /**
+     * Returns class list for click outside overlay (background click)
+     */
+    backgroundClickClass() {
+      return ['v--modal-background-click']
+    },
     /**
      * Returns class list for modal itself
      */
@@ -654,10 +662,15 @@ export default {
   height: 100%;
   min-height: 100vh;
   overflow-y: auto;
-  padding-bottom: 10px;
   -webkit-overflow-scrolling: touch;
 }
 
+.v--modal-overlay .v--modal-background-click {
+  min-height: 100%;
+  width: 100%;
+  padding-bottom: 10px;
+}
+
 .v--modal-overlay .v--modal-box {
   position: relative;
   overflow: hidden;