From b513a19003815b9c300df6b54419fa0123bff9c6 Mon Sep 17 00:00:00 2001
From: alpadev <2838324+alpadev@users.noreply.github.com>
Date: Mon, 24 May 2021 17:52:36 +0200
Subject: [PATCH] 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.
---
 js/src/modal.js             | 10 +++++-----
 js/tests/unit/modal.spec.js | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 6 deletions(-)

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', () => {