Revert backdrop utilization, handling clicks over modal (#36324)

* refactor(Modal.js): stop using backdrop class to handle clicks over modal

* Revert #35554 and backdrop callback usage
  Explanation: In order to bypass `.modal`, was applied a css rule `pointer-events:none` which caused the side effect, and user couldn't scroll "long content modals"

* Update .bundlewatch.config.json

Co-authored-by: Mark Otto <markd.otto@gmail.com>

4 files changed, 23 insertions, 25 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index cb37f08fdb..c4e9db4b1d 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -34,7 +34,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "42.75 kB"
+      "maxSize": "43.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
@@ -42,7 +42,7 @@
     },
     {
       "path": "./dist/js/bootstrap.esm.js",
-      "maxSize": "27.5 kB"
+      "maxSize": "27.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.esm.min.js",
diff --git a/js/src/modal.js b/js/src/modal.js
index ea8e0a0463..cb6c5e627c 100644
--- a/js/src/modal.js
+++ b/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_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
@@ -152,22 +153,9 @@ class Modal extends BaseComponent {
 
   // Private
   _initializeBackDrop() {
-    const clickCallback = () => {
-      if (this._config.backdrop === 'static') {
-        this._triggerBackdropTransition()
-        return
-      }
-
-      this.hide()
-    }
-
-    // 'static' option will be translated to true, and booleans will keep their value
-    const isVisible = Boolean(this._config.backdrop)
-
     return new Backdrop({
-      isVisible,
-      isAnimated: this._isAnimated(),
-      clickCallback: isVisible ? clickCallback : null
+      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
+      isAnimated: this._isAnimated()
     })
   }
 
@@ -232,6 +220,21 @@ class Modal extends BaseComponent {
         this._adjustDialog()
       }
     })
+
+    EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
+      if (event.target !== event.currentTarget) { // click is inside modal-dialog
+        return
+      }
+
+      if (this._config.backdrop === 'static') {
+        this._triggerBackdropTransition()
+        return
+      }
+
+      if (this._config.backdrop) {
+        this.hide()
+      }
+    })
   }
 
   _hideModal() {
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index bf26377fe8..a127792344 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -642,11 +642,8 @@ describe('Modal', () => {
         modalEl.addEventListener('shown.bs.modal', () => {
           const spy = spyOn(modal, '_queueCallback').and.callThrough()
 
-          const mouseOverEvent = createEvent('mousedown')
-          const backdrop = document.querySelector('.modal-backdrop')
-
-          backdrop.dispatchEvent(mouseOverEvent)
-          backdrop.dispatchEvent(mouseOverEvent)
+          modalEl.click()
+          modalEl.click()
 
           setTimeout(() => {
             expect(spy).toHaveBeenCalledTimes(1)
@@ -714,8 +711,7 @@ describe('Modal', () => {
         const modalEl = fixtureEl.querySelector('.modal')
         const modal = new Modal(modalEl)
         modalEl.addEventListener('shown.bs.modal', () => {
-          const mouseOverEvent = createEvent('mousedown')
-          document.querySelector('.modal-backdrop').dispatchEvent(mouseOverEvent)
+          modalEl.click()
         })
 
         modalEl.addEventListener('hidden.bs.modal', () => {
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 39f4f2edf1..a25af57414 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -41,7 +41,6 @@
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  pointer-events: none;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;