Fix prevented show event disables modals with fade class from being displayed again...

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 2dc7e75d98b239ea381a86e0c0443a99d0b84e7c..b05fe8de756a232e8e43cc783b4056f3e7298062 100644 (file)
--- 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 92bd1423ec278af0457449697359ceb8d04f14c6..f73ac40b55a6206d5c8fb249fd68db6c0e986ff8 100644 (file)
--- 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', () => {