Fix modal event-listeners during dismiss click (#36863)

ref: #36855

.bundlewatch.config.json

@@ -34,7 +34,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "43.0 kB"
+      "maxSize": "43.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
@@ -50,7 +50,7 @@
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "28.5 kB"
+      "maxSize": "28.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",

js/src/modal.js

@@ -30,6 +30,7 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`
 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,18 +223,21 @@ class Modal extends BaseComponent {
     })
 
     EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
-      if (event.target !== event.currentTarget) { // click is inside modal-dialog
-        return
-      }
+      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 === 'static') {
+          this._triggerBackdropTransition()
+          return
+        }
 
-      if (this._config.backdrop) {
-        this.hide()
-      }
+        if (this._config.backdrop) {
+          this.hide()
+        }
+      })
     })
   }
 

js/tests/unit/modal.spec.js

@@ -644,7 +644,9 @@ describe('Modal', () => {
           const mouseDown = createEvent('mousedown')
 
           modalEl.dispatchEvent(mouseDown)
+          modalEl.click()
           modalEl.dispatchEvent(mouseDown)
+          modalEl.click()
 
           setTimeout(() => {
             expect(spy).toHaveBeenCalledTimes(1)
@@ -719,9 +721,11 @@ describe('Modal', () => {
           const mouseDown = createEvent('mousedown')
 
           dialogEl.dispatchEvent(mouseDown)
+          modalEl.click()
           expect(spy).not.toHaveBeenCalled()
 
           modalEl.dispatchEvent(mouseDown)
+          modalEl.click()
           expect(spy).toHaveBeenCalled()
           resolve()
         })