root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Fix modal event-listeners during dismiss click (#36863) 

ref: #36855
This commit is contained in:
GeoSot 2022-09-07 11:56:33 +03:00 committed by GitHub
parent 949456984a
commit 23fb7a7915
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.bundlewatch.config.json
View File

@ -34,7 +34,7 @@
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",
"maxSize": "43.0 kB" "maxSize": "43.25 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.min.js", "path": "./dist/js/bootstrap.bundle.min.js",
@ -50,7 +50,7 @@
}, },
{ {
"path": "./dist/js/bootstrap.js", "path": "./dist/js/bootstrap.js",
"maxSize": "28.5 kB" "maxSize": "28.75 kB"
}, },
{ {
"path": "./dist/js/bootstrap.min.js", "path": "./dist/js/bootstrap.min.js",

24
js/src/modal.js
View File

@ -30,6 +30,7 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}` const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}` const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}` const EVENT_RESIZE = `resize${EVENT_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}` const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}` const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
@ -222,18 +223,21 @@ class Modal extends BaseComponent {
}) })
EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => { EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
if (event.target !== event.currentTarget) { // click is inside modal-dialog EventHandler.one(this._element, EVENT_CLICK_DISMISS, event2 => {
return // 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)) {
return
}
if (this._config.backdrop === 'static') { if (this._config.backdrop === 'static') {
this._triggerBackdropTransition() this._triggerBackdropTransition()
return return
} }
if (this._config.backdrop) { if (this._config.backdrop) {
this.hide() this.hide()
} }
})
}) })
} }

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

@ -644,7 +644,9 @@ describe('Modal', () => {
const mouseDown = createEvent('mousedown') const mouseDown = createEvent('mousedown')
modalEl.dispatchEvent(mouseDown) modalEl.dispatchEvent(mouseDown)
modalEl.click()
modalEl.dispatchEvent(mouseDown) modalEl.dispatchEvent(mouseDown)
modalEl.click()
setTimeout(() => { setTimeout(() => {
expect(spy).toHaveBeenCalledTimes(1) expect(spy).toHaveBeenCalledTimes(1)
@ -719,9 +721,11 @@ describe('Modal', () => {
const mouseDown = createEvent('mousedown') const mouseDown = createEvent('mousedown')
dialogEl.dispatchEvent(mouseDown) dialogEl.dispatchEvent(mouseDown)
modalEl.click()
expect(spy).not.toHaveBeenCalled() expect(spy).not.toHaveBeenCalled()
modalEl.dispatchEvent(mouseDown) modalEl.dispatchEvent(mouseDown)
modalEl.click()
expect(spy).toHaveBeenCalled() expect(spy).toHaveBeenCalled()
resolve() resolve()
}) })