fix(modal): change the order we return from show() method (#34087)

In case of a modal with fading enabled, a prevented show event can cause show to not showing the modal anymore.

See #34055

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
alpadev 2021-07-25 19:36:11 +02:00 committed by GitHub
parent 5d24fef741
commit b010a6f9f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 5 deletions

View File

@ -104,22 +104,22 @@ class Modal {
return
}
if ($(this._element).hasClass(CLASS_NAME_FADE)) {
this._isTransitioning = true
}
const showEvent = $.Event(EVENT_SHOW, {
relatedTarget
})
$(this._element).trigger(showEvent)
if (this._isShown || showEvent.isDefaultPrevented()) {
if (showEvent.isDefaultPrevented()) {
return
}
this._isShown = true
if ($(this._element).hasClass(CLASS_NAME_FADE)) {
this._isTransitioning = true
}
this._checkScrollbar()
this._setScrollbar()

View File

@ -102,6 +102,32 @@ $(function () {
.bootstrapModal('show')
})
QUnit.test('should be shown after the first call to show() has been prevented while fading is enabled', function (assert) {
assert.expect(2)
var done = assert.async()
var $el = $('<div class="modal fade"><div class="modal-dialog" style="transition-duration: 20ms;"/></div>').appendTo('#qunit-fixture')
var prevented = false
$el
.on('show.bs.modal', function (e) {
if (!prevented) {
e.preventDefault()
prevented = true
setTimeout(function () {
$el.bootstrapModal('show')
})
}
})
.on('shown.bs.modal', function () {
assert.ok(prevented, 'show prevented')
assert.ok($el.hasClass('fade'))
done()
})
.bootstrapModal('show')
})
QUnit.test('should hide modal when hide is called', function (assert) {
assert.expect(3)
var done = assert.async()