fix: do not fix scrollbar padding in case body has overflow-y: hidden (…

…#2006)
sweetalert2 · Jun 23, 2020 · bc90d3c · bc90d3c
1 parent 99a0e31
commit bc90d3c
Show file tree

Hide file tree

Showing 4 changed files with 418 additions and 501 deletions.
diff --git a/cypress/integration/scrollbar.spec.js b/cypress/integration/scrollbar.spec.js
@@ -1,4 +1,4 @@
-import { Swal, SwalWithoutAnimation } from '../utils'
+import { Swal, SwalWithoutAnimation, ensureClosed } from '../utils'
 import { measureScrollbar } from '../../src/utils/dom/measureScrollbar'
 
 describe('Vertical scrollbar', () => {
@@ -10,12 +10,14 @@ describe('Vertical scrollbar', () => {
       onOpen: () => {
         expect(Swal.getContainer().scrollTop).to.equal(0)
         expect(Swal.getContainer().style.overflowY).to.equal('auto')
+        Swal.close()
         done()
       }
     })
   })
 
   it('should be hidden and the according padding-right should be set', (done) => {
+    ensureClosed()
     const talltDiv = document.createElement('div')
     talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')
     document.body.appendChild(talltDiv)
@@ -31,11 +33,11 @@ describe('Vertical scrollbar', () => {
         done()
       }
     })
-    const bodyStyles = window.getComputedStyle(document.body)
 
+    const bodyStyles = window.getComputedStyle(document.body)
     expect(bodyStyles.paddingRight).to.equal(`${scrollbarWidth + 30}px`)
     expect(bodyStyles.overflow).to.equal('hidden')
-    Swal.clickConfirm()
+    Swal.close()
   })
 
   it('scrollbarPadding disabled', () => {
@@ -54,7 +56,7 @@ describe('Vertical scrollbar', () => {
 
     const bodyStyles = window.getComputedStyle(document.body)
     expect(bodyStyles.paddingRight).to.equal('30px')
-    Swal.clickConfirm()
+    Swal.close()
   })
 
   it('should be restored before a toast is fired after a modal', (done) => {
@@ -78,6 +80,21 @@ describe('Vertical scrollbar', () => {
     })
 
     const bodyStyles = window.getComputedStyle(document.body)
-    Swal.clickConfirm()
+    Swal.close()
+  })
+
+  it('should not add body padding if body has overflow-y: hidden', () => {
+    const talltDiv = document.createElement('div')
+    talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')
+    document.body.appendChild(talltDiv)
+    document.body.style.paddingRight = '0px'
+    document.body.style.overflowY = 'hidden'
+
+    SwalWithoutAnimation.fire()
+
+    const bodyStyles = window.getComputedStyle(document.body)
+    expect(bodyStyles.paddingRight).to.equal('0px')
+    document.body.removeChild(talltDiv)
+    Swal.close()
   })
 })
diff --git a/src/utils/openPopup.js b/src/utils/openPopup.js
@@ -19,13 +19,16 @@ export const openPopup = (params) => {
     params.onBeforeOpen(popup)
   }
 
+  const bodyStyles = window.getComputedStyle(document.body)
+  const initialBodyOverflow = bodyStyles.overflowY
   addClasses(container, popup, params)
 
   // scrolling is 'hidden' until animation is done, after that 'auto'
   setScrollingVisibility(container, popup)
 
   if (dom.isModal()) {
-    fixScrollContainer(container, params.scrollbarPadding)
+    fixScrollContainer(container, params.scrollbarPadding, initialBodyOverflow)
+    setAriaHidden()
   }
 
   if (!dom.isToast() && !globalState.previousActiveElement) {
@@ -56,12 +59,11 @@ const setScrollingVisibility = (container, popup) => {
   }
 }
 
-const fixScrollContainer = (container, scrollbarPadding) => {
+const fixScrollContainer = (container, scrollbarPadding, initialBodyOverflow) => {
   iOSfix()
   IEfix()
-  setAriaHidden()
 
-  if (scrollbarPadding) {
+  if (scrollbarPadding && initialBodyOverflow !== 'hidden') {
     fixScrollbar()
   }
 

diff --git a/test/qunit/tests.js b/test/qunit/tests.js
@@ -1,4 +1,4 @@
-const { $, Swal, SwalWithoutAnimation, triggerKeydownEvent, isVisible, isHidden, TIMEOUT } = require('./helpers')
+const { $, Swal, SwalWithoutAnimation, triggerKeydownEvent, isVisible, isHidden, ensureClosed, TIMEOUT } = require('./helpers')
 const { toArray } = require('../../src/utils/utils')
 const { measureScrollbar } = require('../../src/utils/dom/measureScrollbar')
 const sinon = require('sinon/pkg/sinon')
@@ -86,6 +86,7 @@ QUnit.test('should show the popup with OK button in case of empty object passed
 
 QUnit.test('the vertical scrollbar should be hidden and the according padding-right should be set', (assert) => {
   const done = assert.async()
+  ensureClosed()
   const talltDiv = document.createElement('div')
   talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')
   document.body.appendChild(talltDiv)
@@ -101,11 +102,11 @@ QUnit.test('the vertical scrollbar should be hidden and the according padding-ri
       done()
     }
   })
-  const bodyStyles = window.getComputedStyle(document.body)
 
+  const bodyStyles = window.getComputedStyle(document.body)
   assert.equal(bodyStyles.paddingRight, `${scrollbarWidth + 30}px`)
   assert.equal(bodyStyles.overflow, 'hidden')
-  Swal.clickConfirm()
+  Swal.close()
 })
 
 QUnit.test('scrollbarPadding disabled', (assert) => {
@@ -124,7 +125,7 @@ QUnit.test('scrollbarPadding disabled', (assert) => {
 
   const bodyStyles = window.getComputedStyle(document.body)
   assert.equal(bodyStyles.paddingRight, '30px')
-  Swal.clickConfirm()
+  Swal.close()
 })
 
 QUnit.test('the vertical scrollbar should be restored before a toast is fired after a modal', (assert) => {
@@ -149,7 +150,22 @@ QUnit.test('the vertical scrollbar should be restored before a toast is fired af
   })
 
   const bodyStyles = window.getComputedStyle(document.body)
-  Swal.clickConfirm()
+  Swal.close()
+})
+
+QUnit.test('should not add body padding if body has overflow-y: hidden', (assert) => {
+  const talltDiv = document.createElement('div')
+  talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')
+  document.body.appendChild(talltDiv)
+  document.body.style.paddingRight = '0px'
+  document.body.style.overflowY = 'hidden'
+
+  SwalWithoutAnimation.fire()
+
+  const bodyStyles = window.getComputedStyle(document.body)
+  assert.equal(bodyStyles.paddingRight, '0px')
+  document.body.removeChild(talltDiv)
+  Swal.close()
 })
 
 QUnit.test('modal width', (assert) => {