Prevent overflowing static backdrop modal animation (#30326)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

2 files changed, 33 insertions, 1 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 0d15041bd7..8c6617650d 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -409,10 +409,23 @@ class Modal {
         return
       }
 
+      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+
+      if (!isModalOverflowing) {
+        this._element.style.overflowY = 'hidden'
+      }
+
       this._element.classList.add(CLASS_NAME_STATIC)
-      const modalTransitionDuration = getTransitionDurationFromElement(this._element)
+      const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
+      EventHandler.off(this._element, TRANSITION_END)
       EventHandler.one(this._element, TRANSITION_END, () => {
         this._element.classList.remove(CLASS_NAME_STATIC)
+        if (!isModalOverflowing) {
+          EventHandler.one(this._element, TRANSITION_END, () => {
+            this._element.style.overflowY = ''
+          })
+          emulateTransitionEnd(this._element, modalTransitionDuration)
+        }
       })
       emulateTransitionEnd(this._element, modalTransitionDuration)
       this._element.focus()
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index afb8f2c2d4..253f935135 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -626,6 +626,25 @@ describe('Modal', () => {
       modal.show()
     })
 
+    it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
+
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl, {
+        backdrop: 'static'
+      })
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        modalEl.click()
+        setTimeout(() => {
+          expect(modalEl.clientHeight === modalEl.scrollHeight).toEqual(true)
+          done()
+        }, 20)
+      })
+
+      modal.show()
+    })
+
     it('should not adjust the inline body padding when it does not overflow', done => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'