1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 06:06:47 +02:00

fix: change dismiss handler, listening to key down, instead of click (#36401)

This commit is contained in:
GeoSot
2022-06-21 11:03:57 +03:00
committed by GitHub
parent a877c5d04a
commit d05c42a397
2 changed files with 16 additions and 9 deletions

View File

@@ -30,7 +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_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}`
@@ -221,7 +221,7 @@ class Modal extends BaseComponent {
} }
}) })
EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => { EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
if (event.target !== event.currentTarget) { // click is inside modal-dialog if (event.target !== event.currentTarget) { // click is inside modal-dialog
return return
} }

View File

@@ -641,9 +641,10 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => { modalEl.addEventListener('shown.bs.modal', () => {
const spy = spyOn(modal, '_queueCallback').and.callThrough() const spy = spyOn(modal, '_queueCallback').and.callThrough()
const mouseDown = createEvent('mousedown')
modalEl.click() modalEl.dispatchEvent(mouseDown)
modalEl.click() modalEl.dispatchEvent(mouseDown)
setTimeout(() => { setTimeout(() => {
expect(spy).toHaveBeenCalledTimes(1) expect(spy).toHaveBeenCalledTimes(1)
@@ -709,13 +710,19 @@ describe('Modal', () => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal') const modalEl = fixtureEl.querySelector('.modal')
const dialogEl = modalEl.querySelector('.modal-dialog')
const modal = new Modal(modalEl) const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
modalEl.click()
})
modalEl.addEventListener('hidden.bs.modal', () => { spyOn(modal, 'hide')
expect(document.querySelector('.modal-backdrop')).toBeNull()
modalEl.addEventListener('shown.bs.modal', () => {
const mouseDown = createEvent('mousedown')
dialogEl.dispatchEvent(mouseDown)
expect(modal.hide).not.toHaveBeenCalled()
modalEl.dispatchEvent(mouseDown)
expect(modal.hide).toHaveBeenCalled()
resolve() resolve()
}) })