diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-05-13 07:20:04 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-13 07:20:04 +0300 |
commit | b167420bdf3c23ad9fb6c57818048c3c0e8da702 (patch) | |
tree | 2faa511ac7449cb81c1aaacde219c013a553c7f6 /js/src | |
parent | 88a6610895c05d05f4710d0783eb5ea2f30294fe (diff) |
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>
Diffstat (limited to 'js/src')
-rw-r--r-- | js/src/modal.js | 33 |
1 files changed, 18 insertions, 15 deletions
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() { |