diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 41cea2119d06..4c9acc990eea 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -34,7 +34,7 @@ }, { "path": "./dist/js/bootstrap.bundle.js", - "maxSize": "43.0 kB" + "maxSize": "43.25 kB" }, { "path": "./dist/js/bootstrap.bundle.min.js", @@ -50,7 +50,7 @@ }, { "path": "./dist/js/bootstrap.js", - "maxSize": "28.5 kB" + "maxSize": "28.75 kB" }, { "path": "./dist/js/bootstrap.min.js", diff --git a/js/src/modal.js b/js/src/modal.js index 3e990e7cc97e..1f281e2a3dc9 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_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}` const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_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 => { - 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() - } + 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)) { + return + } + + if (this._config.backdrop === 'static') { + this._triggerBackdropTransition() + return + } + + if (this._config.backdrop) { + this.hide() + } + }) }) } diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 1bdf4e66ad89..e774fc4e8e55 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -644,7 +644,9 @@ describe('Modal', () => { const mouseDown = createEvent('mousedown') modalEl.dispatchEvent(mouseDown) + modalEl.click() modalEl.dispatchEvent(mouseDown) + modalEl.click() setTimeout(() => { expect(spy).toHaveBeenCalledTimes(1) @@ -719,9 +721,11 @@ describe('Modal', () => { const mouseDown = createEvent('mousedown') dialogEl.dispatchEvent(mouseDown) + modalEl.click() expect(spy).not.toHaveBeenCalled() modalEl.dispatchEvent(mouseDown) + modalEl.click() expect(spy).toHaveBeenCalled() resolve() })