From b010a6f9f4ea3dda08a4792e1367730ddcf8752d Mon Sep 17 00:00:00 2001
From: alpadev <2838324+alpadev@users.noreply.github.com>
Date: Sun, 25 Jul 2021 19:36:11 +0200
Subject: [PATCH] fix(modal): change the order we return from show() method
 (#34087)

In case of a modal with fading enabled, a prevented show event can cause show to not showing the modal anymore.

See #34055

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/modal.js        | 10 +++++-----
 js/tests/unit/modal.js | 26 ++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 2e3017024ef4..a23bfc1ba6d0 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -104,22 +104,22 @@ class Modal {
       return
     }
 
-    if ($(this._element).hasClass(CLASS_NAME_FADE)) {
-      this._isTransitioning = true
-    }
-
     const showEvent = $.Event(EVENT_SHOW, {
       relatedTarget
     })
 
     $(this._element).trigger(showEvent)
 
-    if (this._isShown || showEvent.isDefaultPrevented()) {
+    if (showEvent.isDefaultPrevented()) {
       return
     }
 
     this._isShown = true
 
+    if ($(this._element).hasClass(CLASS_NAME_FADE)) {
+      this._isTransitioning = true
+    }
+
     this._checkScrollbar()
     this._setScrollbar()
 
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index a46b3d2deffe..f2c60684b979 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -102,6 +102,32 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  QUnit.test('should be shown after the first call to show() has been prevented while fading is enabled', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    var $el = $('<div class="modal fade"><div class="modal-dialog" style="transition-duration: 20ms;"/></div>').appendTo('#qunit-fixture')
+
+    var prevented = false
+    $el
+      .on('show.bs.modal', function (e) {
+        if (!prevented) {
+          e.preventDefault()
+          prevented = true
+
+          setTimeout(function () {
+            $el.bootstrapModal('show')
+          })
+        }
+      })
+      .on('shown.bs.modal', function () {
+        assert.ok(prevented, 'show prevented')
+        assert.ok($el.hasClass('fade'))
+        done()
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should hide modal when hide is called', function (assert) {
     assert.expect(3)
     var done = assert.async()