Use the backdrop util in offcanvas, enforcing consistency (#33545)

* respect /share modal's backdrop functionality, keeping consistency
* listen click events over backdrop (only) and trigger `hide()` without add/remove event tricks
* achieve to hide foreign open offcanvas instances without glitches `if (allReadyOpen && allReadyOpen !== target)`, in case another is going to be open, when user clicks on trigger button

1 files changed, 12 insertions, 2 deletions

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index ab14c23fe..a9d28bd10 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -11,19 +11,23 @@ import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow
 const Default = {
   isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
   isAnimated: false,
-  rootElement: document.body // give the choice to place backdrop under different elements
+  rootElement: document.body, // give the choice to place backdrop under different elements
+  clickCallback: null
 }
 
 const DefaultType = {
   isVisible: 'boolean',
   isAnimated: 'boolean',
-  rootElement: 'element'
+  rootElement: 'element',
+  clickCallback: '(function|null)'
 }
 const NAME = 'backdrop'
 const CLASS_NAME_BACKDROP = 'modal-backdrop'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
+const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
+
 class Backdrop {
   constructor(config) {
     this._config = this._getConfig(config)
@@ -96,6 +100,10 @@ class Backdrop {
 
     this._config.rootElement.appendChild(this._getElement())
 
+    EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
+      execute(this._config.clickCallback)
+    })
+
     this._isAppended = true
   }
 
@@ -104,6 +112,8 @@ class Backdrop {
       return
     }
 
+    EventHandler.off(this._element, EVENT_MOUSEDOWN)
+
     this._getElement().parentNode.removeChild(this._element)
     this._isAppended = false
   }