Backport #32179 (#32220)

Don't hide modal when `config.keyboard` is false
twbs · Nov 21, 2020 · bfb773d · bfb773d
1 parent 2d8c02e
commit bfb773d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/js/src/modal.js b/js/src/modal.js
@@ -230,39 +230,35 @@ class Modal {
   }
 
   _triggerBackdropTransition() {
-    if (this._config.backdrop === 'static') {
-      const hideEventPrevented = $.Event(EVENT_HIDE_PREVENTED)
+    const hideEventPrevented = $.Event(EVENT_HIDE_PREVENTED)
 
-      $(this._element).trigger(hideEventPrevented)
-      if (hideEventPrevented.isDefaultPrevented()) {
-        return
-      }
+    $(this._element).trigger(hideEventPrevented)
+    if (hideEventPrevented.isDefaultPrevented()) {
+      return
+    }
 
-      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
 
-      if (!isModalOverflowing) {
-        this._element.style.overflowY = 'hidden'
-      }
+    if (!isModalOverflowing) {
+      this._element.style.overflowY = 'hidden'
+    }
 
-      this._element.classList.add(CLASS_NAME_STATIC)
+    this._element.classList.add(CLASS_NAME_STATIC)
 
-      const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog)
-      $(this._element).off(Util.TRANSITION_END)
+    const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog)
+    $(this._element).off(Util.TRANSITION_END)
 
-      $(this._element).one(Util.TRANSITION_END, () => {
-        this._element.classList.remove(CLASS_NAME_STATIC)
-        if (!isModalOverflowing) {
-          $(this._element).one(Util.TRANSITION_END, () => {
-            this._element.style.overflowY = ''
-          })
-            .emulateTransitionEnd(this._element, modalTransitionDuration)
-        }
-      })
-        .emulateTransitionEnd(modalTransitionDuration)
-      this._element.focus()
-    } else {
-      this.hide()
-    }
+    $(this._element).one(Util.TRANSITION_END, () => {
+      this._element.classList.remove(CLASS_NAME_STATIC)
+      if (!isModalOverflowing) {
+        $(this._element).one(Util.TRANSITION_END, () => {
+          this._element.style.overflowY = ''
+        })
+          .emulateTransitionEnd(this._element, modalTransitionDuration)
+      }
+    })
+      .emulateTransitionEnd(modalTransitionDuration)
+    this._element.focus()
   }
 
   _showElement(relatedTarget) {
@@ -400,7 +396,11 @@ class Modal {
           return
         }
 
-        this._triggerBackdropTransition()
+        if (this._config.backdrop === 'static') {
+          this._triggerBackdropTransition()
+        } else {
+          this.hide()
+        }
       })
 
       if (animate) {

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
@@ -934,10 +934,10 @@ $(function () {
       })
   })
 
-  QUnit.test('should not close modal when escape key is pressed with keyboard = false and backdrop = static', function (assert) {
+  QUnit.test('should not close modal when escape key is pressed with keyboard = false', function (assert) {
     assert.expect(1)
     var done = assert.async()
-    var $modal = $('<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" /></div>').appendTo('#qunit-fixture')
+    var $modal = $('<div class="modal"><div class="modal-dialog" /></div>').appendTo('#qunit-fixture')
 
     $modal.on('shown.bs.modal', function () {
       $modal.trigger($.Event('keydown', {
@@ -955,7 +955,6 @@ $(function () {
         assert.strictEqual(false, true, 'should not hide the modal')
       })
       .bootstrapModal({
-        backdrop: 'static',
         keyboard: false
       })
   })