diff --git a/js/src/modal.js b/js/src/modal.js
index e2b711e5be..48ff5b8540 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -306,9 +306,12 @@ class Modal {
}
_setEscapeEvent() {
- if (this._isShown && this._config.keyboard) {
+ if (this._isShown) {
EventHandler.on(this._element, Event.KEYDOWN_DISMISS, event => {
- if (event.which === ESCAPE_KEYCODE) {
+ if (this._config.keyboard && event.which === ESCAPE_KEYCODE) {
+ event.preventDefault()
+ this.hide()
+ } else if (!this._config.keyboard && event.which === ESCAPE_KEYCODE) {
this._triggerBackdropTransition()
}
})
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 2edef22b2c..b4923ab3f4 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -567,6 +567,64 @@ describe('Modal', () => {
modal.show()
})
+ it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
+ fixtureEl.innerHTML = '
'
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl, {
+ backdrop: 'static',
+ keyboard: true
+ })
+
+ const shownCallback = () => {
+ setTimeout(() => {
+ expect(modal._isShown).toEqual(false)
+ done()
+ }, 10)
+ }
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const keydownEscape = createEvent('keydown')
+ keydownEscape.which = 27
+
+ modalEl.dispatchEvent(keydownEscape)
+ shownCallback()
+ })
+
+ modal.show()
+ })
+
+ it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
+ fixtureEl.innerHTML = ''
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl, {
+ backdrop: 'static',
+ keyboard: false
+ })
+
+ const shownCallback = () => {
+ setTimeout(() => {
+ expect(modal._isShown).toEqual(true)
+ done()
+ }, 10)
+ }
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const keydownEscape = createEvent('keydown')
+ keydownEscape.which = 27
+
+ modalEl.dispatchEvent(keydownEscape)
+ shownCallback()
+ })
+
+ modalEl.addEventListener('hidden.bs.modal', () => {
+ throw new Error('Should not hide a modal')
+ })
+
+ modal.show()
+ })
+
it('should not adjust the inline body padding when it does not overflow', done => {
fixtureEl.innerHTML = ''
diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index 15a3eeabf1..6571a5ce49 100644
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -144,7 +144,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
-