ensure `hidePrevented.bs.modal` can be prevented (#31696)

2 files changed, 40 insertions, 1 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 311c369ebb..7b4228ffdd 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -234,7 +234,7 @@ class Modal {
       const hideEventPrevented = $.Event(EVENT_HIDE_PREVENTED)
 
       $(this._element).trigger(hideEventPrevented)
-      if (hideEventPrevented.defaultPrevented) {
+      if (hideEventPrevented.isDefaultPrevented()) {
         return
       }
 
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index c4e5a30565..60c3cba9dd 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -976,4 +976,43 @@ $(function () {
         backdrop: 'static'
       })
   })
+
+  QUnit.test('should get modal-static class when clicking outside of modal-content if backdrop = static', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $modal = $('<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"/></div>').appendTo('#qunit-fixture')
+
+    $modal.on('shown.bs.modal', function () {
+      $modal.trigger('click')
+      setTimeout(function () {
+        assert.ok($modal.hasClass('modal-static'), 'has modal-static class')
+        done()
+      }, 0)
+    })
+      .bootstrapModal({
+        backdrop: 'static'
+      })
+  })
+
+  QUnit.test('should not get modal-static class when clicking outside of modal-content if backdrop = static and event is prevented', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $modal = $('<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"/></div>').appendTo('#qunit-fixture')
+
+    $modal.on('hidePrevented.bs.modal', function (e) {
+      assert.ok(true, 'should trigger hidePrevented event')
+      e.preventDefault()
+    })
+
+    $modal.on('shown.bs.modal', function () {
+      $modal.trigger('click')
+      setTimeout(function () {
+        assert.notOk($modal.hasClass('modal-static'), 'should not have modal-static class')
+        done()
+      }, 0)
+    })
+      .bootstrapModal({
+        backdrop: 'static'
+      })
+  })
 })