Unverified Commit 0839cbf0 authored by Rohit Sharma's avatar Rohit Sharma Committed by GitHub
Browse files

Don't hide modal when keyboard is set to false in modal's configuration (#32179)


* Don't hide modal when config.keyboard is false

* Update unit test

- Modal should not be closed when pressing esc key if keyboard = false
  and backdrop is 'static'

Co-authored-by: default avatarXhmikosR <xhmikosr@gmail.com>
parent 2630b05e
Showing with 28 additions and 29 deletions
+28 -29
...@@ -365,7 +365,11 @@ class Modal { ...@@ -365,7 +365,11 @@ class Modal {
return return
} }
this._triggerBackdropTransition() if (this._config.backdrop === 'static') {
this._triggerBackdropTransition()
} else {
this.hide()
}
}) })
if (animate) { if (animate) {
...@@ -404,35 +408,31 @@ class Modal { ...@@ -404,35 +408,31 @@ class Modal {
} }
_triggerBackdropTransition() { _triggerBackdropTransition() {
if (this._config.backdrop === 'static') { const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) if (hideEvent.defaultPrevented) {
if (hideEvent.defaultPrevented) { return
return }
}
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
if (!isModalOverflowing) {
this._element.style.overflowY = 'hidden'
}
this._element.classList.add(CLASS_NAME_STATIC)
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
EventHandler.off(this._element, TRANSITION_END)
EventHandler.one(this._element, TRANSITION_END, () => {
this._element.classList.remove(CLASS_NAME_STATIC)
if (!isModalOverflowing) { if (!isModalOverflowing) {
this._element.style.overflowY = 'hidden' EventHandler.one(this._element, TRANSITION_END, () => {
this._element.style.overflowY = ''
})
emulateTransitionEnd(this._element, modalTransitionDuration)
} }
})
this._element.classList.add(CLASS_NAME_STATIC) emulateTransitionEnd(this._element, modalTransitionDuration)
const modalTransitionDuration = getTransitionDurationFromElement(this._dialog) this._element.focus()
EventHandler.off(this._element, TRANSITION_END)
EventHandler.one(this._element, TRANSITION_END, () => {
this._element.classList.remove(CLASS_NAME_STATIC)
if (!isModalOverflowing) {
EventHandler.one(this._element, TRANSITION_END, () => {
this._element.style.overflowY = ''
})
emulateTransitionEnd(this._element, modalTransitionDuration)
}
})
emulateTransitionEnd(this._element, modalTransitionDuration)
this._element.focus()
} else {
this.hide()
}
} }
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
......
...@@ -595,12 +595,11 @@ describe('Modal', () => { ...@@ -595,12 +595,11 @@ describe('Modal', () => {
modal.show() modal.show()
}) })
it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => { it('should not close modal when escape key is pressed with keyboard = false', done => {
fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>' fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal') const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, { const modal = new Modal(modalEl, {
backdrop: 'static',
keyboard: false keyboard: false
}) })
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment