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

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

See #34055

js/src/modal.js

@@ -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()
 

js/tests/unit/modal.js

@@ -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()