fix: regression on modal dismissgs/modal-dismiss-regr

2 files changed, 16 insertions, 28 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index c977225388..dcd7b0495d 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -31,7 +31,6 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_RESIZE = `resize${EVENT_KEY}`
 const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
-const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
 const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
@@ -222,22 +221,19 @@ class Modal extends BaseComponent {
       }
     })
 
-    EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
-      EventHandler.one(this._element, EVENT_CLICK_DISMISS, event2 => {
-        // a bad trick to segregate clicks that may start inside dialog but end outside, and avoid listen to scrollbar clicks
-        if (this._dialog.contains(event.target) || this._dialog.contains(event2.target)) {
-          return
-        }
-
-        if (this._config.backdrop === 'static') {
-          this._triggerBackdropTransition()
-          return
-        }
-
-        if (this._config.backdrop) {
-          this.hide()
-        }
-      })
+    EventHandler.one(this._element, EVENT_CLICK_DISMISS, event => {
+      if (event.target !== event.currentTarget) {
+        return
+      }
+
+      if (this._config.backdrop === 'static') {
+        this._triggerBackdropTransition()
+        return
+      }
+
+      if (this._config.backdrop) {
+        this.hide()
+      }
     })
   }
 
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index e774fc4e8e..f7dbcda9e0 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -712,21 +712,13 @@ describe('Modal', () => {
         fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
         const modalEl = fixtureEl.querySelector('.modal')
-        const dialogEl = modalEl.querySelector('.modal-dialog')
         const modal = new Modal(modalEl)
-
-        const spy = spyOn(modal, 'hide')
-
         modalEl.addEventListener('shown.bs.modal', () => {
-          const mouseDown = createEvent('mousedown')
-
-          dialogEl.dispatchEvent(mouseDown)
           modalEl.click()
-          expect(spy).not.toHaveBeenCalled()
+        })
 
-          modalEl.dispatchEvent(mouseDown)
-          modalEl.click()
-          expect(spy).toHaveBeenCalled()
+        modalEl.addEventListener('hidden.bs.modal', () => {
+          expect(document.querySelector('.modal-backdrop')).toBeNull()
           resolve()
         })