Fix BhModal scroll

Ilhasoft · Sep 26, 2018 · a718d2c · a718d2c
1 parent 734e778
commit a718d2c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 23 deletions.
diff --git a/src/bh/components/BhModal.vue b/src/bh/components/BhModal.vue
@@ -1,11 +1,9 @@
 <template>
   <div
     v-show="open"
-    class="bh-modal">
-    <div
-      ref="background"
-      class="bh-modal__background"
-      @click="backgroundClose()" />
+    ref="modal"
+    class="bh-modal"
+    @click="backgroundClose($event)">
     <div class="bh-modal__close">
       <button
         ref="closeBtn"
@@ -56,8 +54,8 @@ export default {
     close() {
       this.$emit('update:open', false);
     },
-    backgroundClose() {
-      if (this.backgroundCloses) {
+    backgroundClose(event) {
+      if (this.backgroundCloses && event.target === this.$refs.modal) {
         this.close();
       }
     },
@@ -78,16 +76,8 @@ export default {
     width: 100%;
     height: 100%;
     padding: .5rem;
-
-    &__background {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, .5);
-    }
+    overflow: auto;
+    background-color: rgba(0, 0, 0, .5);
 
     &__close {
       text-align: right;

diff --git a/test/unit/specs/bh/BhModal.spec.js b/test/unit/specs/bh/BhModal.spec.js
@@ -44,7 +44,7 @@ describe('BhModal.vue', () => {
 
   describe('close modal clicking in background', () => {
     beforeEach(() => {
-      const background = wrapper.find({ ref: 'background' });
+      const background = wrapper.find({ ref: 'modal' });
       background.trigger('click');
     });
 

diff --git a/test/unit/specs/bh/__snapshots__/BhModal.spec.js.snap b/test/unit/specs/bh/__snapshots__/BhModal.spec.js.snap
@@ -2,7 +2,6 @@
 
 exports[`BhModal.vue close modal clicking in background renders correctly 1`] = `
 <div class="bh-modal">
-  <div class="bh-modal__background"></div>
   <div class="bh-modal__close">
     <button class="bh-modal__close__button">
       <bhicon-stub></bhicon-stub>
@@ -14,7 +13,6 @@ exports[`BhModal.vue close modal clicking in background renders correctly 1`] =
 
 exports[`BhModal.vue close modal clicking in closeBtn renders correctly 1`] = `
 <div class="bh-modal">
-  <div class="bh-modal__background"></div>
   <div class="bh-modal__close">
     <button class="bh-modal__close__button">
       <bhicon-stub></bhicon-stub>
@@ -26,7 +24,6 @@ exports[`BhModal.vue close modal clicking in closeBtn renders correctly 1`] = `
 
 exports[`BhModal.vue close modal pass false via open prop open modal pass true via open prop renders correctly 1`] = `
 <div class="bh-modal" style="">
-  <div class="bh-modal__background"></div>
   <div class="bh-modal__close">
     <button class="bh-modal__close__button">
       <bhicon-stub></bhicon-stub>
@@ -38,7 +35,6 @@ exports[`BhModal.vue close modal pass false via open prop open modal pass true v
 
 exports[`BhModal.vue close modal pass false via open prop renders correctly 1`] = `
 <div class="bh-modal" style="display: none;">
-  <div class="bh-modal__background"></div>
   <div class="bh-modal__close">
     <button class="bh-modal__close__button">
       <bhicon-stub></bhicon-stub>
@@ -50,7 +46,6 @@ exports[`BhModal.vue close modal pass false via open prop renders correctly 1`]
 
 exports[`BhModal.vue renders correctly 1`] = `
 <div class="bh-modal">
-  <div class="bh-modal__background"></div>
   <div class="bh-modal__close">
     <button class="bh-modal__close__button">
       <bhicon-stub></bhicon-stub>