Modal plugin set _isTransitioning after the trigger of hide event

2 files changed, 28 insertions, 6 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 1ea630c41..399adc4c1 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -169,12 +169,6 @@ const Modal = (() => {
         return
       }
 
-      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
-
-      if (transition) {
-        this._isTransitioning = true
-      }
-
       const hideEvent = $.Event(Event.HIDE)
 
       $(this._element).trigger(hideEvent)
@@ -185,6 +179,12 @@ const Modal = (() => {
 
       this._isShown = false
 
+      const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
+
+      if (transition) {
+        this._isTransitioning = true
+      }
+
       this._setEscapeEvent()
       this._setResizeEvent()
 
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 6e9f0f710..fcc96035b 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -171,6 +171,12 @@
       <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22; role=&#x22;dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22; role=&#x22;document&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;close&#x22; data-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
         Modal with an XSS inside the data-target
       </button>
+
+      <br><br>
+
+      <button type="button" class="btn btn-secondary btn-lg" id="btnPreventModal">
+        Launch prevented modal on hide (to see the result open your console)
+      </button>
     </div>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
@@ -203,6 +209,22 @@
           $('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
           $('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
         })
+
+        $('#btnPreventModal').on('click', function () {
+          $('#firefoxModal').one('shown.bs.modal', function () {
+            $(this).modal('hide')
+          })
+          .one('hide.bs.modal', function (event) {
+            event.preventDefault()
+            if ($(this).data('bs.modal')._isTransitioning) {
+              console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
+            } else {
+              console.log('Test passed')
+              $(this).modal('hide') // work as expected
+            }
+          })
+          .modal('show')
+        })
       })
     </script>
   </body>