diff options
author | Jérémie Broutier <jeremie.broutier@posteo.net> | 2022-09-15 13:30:51 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-15 13:30:51 +0300 |
commit | 6f65df4faea2694840572626f8a02f4399bd0dca (patch) | |
tree | 695bdd7d992748fc94c80ba6bd7f7331b1270228 | |
parent | aedd7fb9de38efbf6bb4a5443aa870d814df8c55 (diff) |
Fix modal event listeners (#37128)
* Fix modal event listeners (#37126)
Co-authored-by: GeoSot <geo.sotis@gmail.com>
-rw-r--r-- | js/src/modal.js | 4 | ||||
-rw-r--r-- | js/tests/unit/modal.spec.js | 30 |
2 files changed, 32 insertions, 2 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index c977225388..a39597b3a8 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -223,9 +223,9 @@ class Modal extends BaseComponent { }) EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => { + // a bad trick to segregate clicks that may start inside dialog but end outside, and avoid listen to scrollbar clicks 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)) { + if (this._element !== event.target || this._element !== event2.target) { return } diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index e774fc4e8e..fdee29e95a 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -734,6 +734,36 @@ describe('Modal', () => { }) }) + it('should not close modal when clicking on an element removed from modal content', () => { + return new Promise(resolve => { + fixtureEl.innerHTML = [ + '<div class="modal">', + ' <div class="modal-dialog">', + ' <button class="btn">BTN</button>', + ' </div>', + '</div>' + ].join('') + + const modalEl = fixtureEl.querySelector('.modal') + const buttonEl = modalEl.querySelector('.btn') + const modal = new Modal(modalEl) + + const spy = spyOn(modal, 'hide') + buttonEl.addEventListener('click', () => { + buttonEl.remove() + }) + + modalEl.addEventListener('shown.bs.modal', () => { + modalEl.dispatchEvent(createEvent('mousedown')) + buttonEl.click() + expect(spy).not.toHaveBeenCalled() + resolve() + }) + + modal.show() + }) + }) + it('should do nothing is the modal is not shown', () => { fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' |