rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Fix modal event listeners (#37128)

Browse Source 
* Fix modal event listeners (#37126)

Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Jérémie Broutier 2022-09-15 12:30:51 +02:00 committed by GitHub
parent aedd7fb9de
commit 6f65df4fae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/modal.js
View File

@ -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
}

30
js/tests/unit/modal.spec.js
View File

@ -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>'