fix(v-dialog): always remove scrollbar when fullscreen

fixes #3101
vuetifyjs · Oct 9, 2018 · ff5d07b · ff5d07b
1 parent 5cfaeba
commit ff5d07b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/components/VDialog/VDialog.js b/src/components/VDialog/VDialog.js
@@ -95,6 +95,10 @@ export default {
         this.removeOverlay()
         this.unbind()
       }
+    },
+    fullscreen (val) {
+      if (val) this.hideScroll()
+      else this.showScroll()
     }
   },
 
@@ -141,6 +145,13 @@ export default {
       // Since this should only be called in a capture event (bottom up), we shouldn't need to stop propagation
       return getZIndex(this.$refs.content) >= this.getMaxZIndex()
     },
+    hideScroll () {
+      if (this.fullscreen) {
+        document.documentElement.classList.add('overflow-y-hidden')
+      } else {
+        Overlayable.methods.hideScroll.call(this)
+      }
+    },
     show () {
       !this.fullscreen && !this.hideOverlay && this.genOverlay()
       this.fullscreen && this.hideScroll()

diff --git a/test/unit/components/VDialog/VDialog.spec.js b/test/unit/components/VDialog/VDialog.spec.js
@@ -194,4 +194,23 @@ test('VDialog.js', ({ mount, compileToFunctions }) => {
 
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/3101
+  it('should always remove scrollbar when fullscreen', async () => {
+    const wrapper = mount(VDialog)
+
+    wrapper.setProps({ value: true })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.documentElement.className).not.toContain('overflow-y-hidden')
+
+    wrapper.setProps({ fullscreen: true })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.documentElement.className).toContain('overflow-y-hidden')
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
 })