diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-05-11 03:12:23 +0300 |
---|---|---|
committer | GeoSot <geo.sotis@gmail.com> | 2022-05-11 03:12:23 +0300 |
commit | 397b1173b792edea8294ffeebdd4d4d49b5daba3 (patch) | |
tree | 88b8dbb4c34c98df3169dc1b9c0ee8db37bea5aa | |
parent | 795167d822d3752ef2ad4f6e716a37e0270c741e (diff) |
refactor(Modal.js): stop using backdrop class to handle clicks over modalgs/revert-36295
* 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"
-rw-r--r-- | js/src/modal.js | 33 | ||||
-rw-r--r-- | js/tests/unit/modal.spec.js | 10 | ||||
-rw-r--r-- | scss/_modal.scss | 1 |
3 files changed, 21 insertions, 23 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() { 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; |