Skip to content
Permalink
Browse files

Close modal with keyboard=true & backdrop=static (#29986)

* Close modal with keyboard=true & backdrop=static
  • Loading branch information
mendozagioo authored and XhmikosR committed Jan 10, 2020
1 parent 4e1fb4f commit 954a0b1e6a206e4df910d4799d013f4388a2ef40
Showing with 67 additions and 6 deletions.
  1. +5 −2 js/src/modal.js
  2. +58 −0 js/tests/unit/modal.spec.js
  3. +4 −4 site/content/docs/4.3/components/modal.md
@@ -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()
}
})
@@ -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 = '<div class="modal" data-backdrop="static"><div class="modal-dialog" /></div>'

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 = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" /></div>'

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 = '<div class="modal"><div class="modal-dialog" /></div>'

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

<div id="staticBackdropLive" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div id="staticBackdropLive" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@@ -177,7 +177,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@@ -810,7 +810,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>backdrop</td>
<td>boolean or the string <code>'static'</code></td>
<td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click or on escape key press.</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr>
<tr>
<td>keyboard</td>
@@ -918,7 +918,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
</tr>
<tr>
<td>hidePrevented.bs.modal</td>
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed.</td>
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-keyboard</code> set to <code>false</code>.</td>
</tr>
</tbody>
</table>

0 comments on commit 954a0b1

Please sign in to comment.
You can’t perform that action at this time.