From: alpadev <2838324+alpadev@users.noreply.github.com>
Date: Mon, 24 May 2021 15:52:36 +0000 (+0200)
Subject: Fix prevented show event disables modals with fade class from being displayed again... 
X-Git-Tag: v5.0.2~69
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b513a19003815b9c300df6b54419fa0123bff9c6;p=thirdparty%2Fbootstrap.git

Fix prevented show event disables modals with fade class from being displayed again (#34085)

Fix modal, in case is faded, a prevented show event can cause show method to not  be executed again.
---

diff --git a/js/src/modal.js b/js/src/modal.js
index 2dc7e75d98..b05fe8de75 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -108,20 +108,20 @@ class Modal extends BaseComponent {
       return
     }
 
-    if (this._isAnimated()) {
-      this._isTransitioning = true
-    }
-
     const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
       relatedTarget
     })
 
-    if (this._isShown || showEvent.defaultPrevented) {
+    if (showEvent.defaultPrevented) {
       return
     }
 
     this._isShown = true
 
+    if (this._isAnimated()) {
+      this._isTransitioning = true
+    }
+
     scrollBarHide()
 
     document.body.classList.add(CLASS_NAME_OPEN)
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 92bd1423ec..f73ac40b55 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -203,6 +203,33 @@ describe('Modal', () => {
       modal.show()
     })
 
+    it('should be shown after the first call to show() has been prevented while fading is enabled ', done => {
+      fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'
+
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl)
+
+      let prevented = false
+      modalEl.addEventListener('show.bs.modal', e => {
+        if (!prevented) {
+          e.preventDefault()
+          prevented = true
+
+          setTimeout(() => {
+            modal.show()
+          })
+        }
+      })
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        expect(prevented).toBeTrue()
+        expect(modal._isAnimated()).toBeTrue()
+        done()
+      })
+
+      modal.show()
+    })
+
     it('should set is transitioning if fade class is present', done => {
       fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'
 
@@ -210,7 +237,9 @@ describe('Modal', () => {
       const modal = new Modal(modalEl)
 
       modalEl.addEventListener('show.bs.modal', () => {
-        expect(modal._isTransitioning).toEqual(true)
+        setTimeout(() => {
+          expect(modal._isTransitioning).toEqual(true)
+        })
       })
 
       modalEl.addEventListener('shown.bs.modal', () => {