Backport #29886

Close modal with keyboard=true & backdrop=static

diff --git a/js/src/modal.js b/js/src/modal.js
index ad925f6ff429615e5dcd777928b48597d5c12f1d..faaa8f108386bf97c171479b4fc9bbfbd056b0c0 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -325,9 +325,12 @@ class Modal {
   }
 
   _setEscapeEvent() {
-    if (this._isShown && this._config.keyboard) {
+    if (this._isShown) {
       $(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
-        if (event.which === ESCAPE_KEYCODE) {
+        if (this._config.keyboard && event.which === ESCAPE_KEYCODE) {
+          event.preventDefault()
+          this.hide()
+        } else if (!this._config.keyboard && event.which === ESCAPE_KEYCODE) {
           this._triggerBackdropTransition()
         }
       })

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index b1ddc8512ff517793d57f0627d2f30c77d0fe6f8..14cebe84f3745569b258ba17f44929182e2dfee2 100644 (file)
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -855,4 +855,53 @@ $(function () {
         backdrop: 'static'
       })
   })
+
+  QUnit.test('should close modal when escape key is pressed with keyboard = true and backdrop is static', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $modal = $('<div class="modal" data-backdrop="static" data-keyboard="true"><div class="modal-dialog" /></div>').appendTo('#qunit-fixture')
+
+    $modal.on('shown.bs.modal', function () {
+      $modal.trigger($.Event('keydown', {
+        which: 27
+      }))
+
+      setTimeout(function () {
+        var modal = $modal.data('bs.modal')
+
+        assert.strictEqual(modal._isShown, false)
+        done()
+      }, 10)
+    })
+      .bootstrapModal({
+        backdrop: 'static',
+        keyboard: true
+      })
+  })
+
+  QUnit.test('should not close modal when escape key is pressed with keyboard = false and backdrop = static', 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')
+
+    $modal.on('shown.bs.modal', function () {
+      $modal.trigger($.Event('keydown', {
+        which: 27
+      }))
+
+      setTimeout(function () {
+        var modal = $modal.data('bs.modal')
+
+        assert.strictEqual(modal._isShown, true)
+        done()
+      }, 10)
+    })
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual(false, true, 'should not hide the modal')
+      })
+      .bootstrapModal({
+        backdrop: 'static',
+        keyboard: false
+      })
+  })
 })

diff --git a/site/docs/4.4/components/modal.md b/site/docs/4.4/components/modal.md
index 6bd573d7a7c532c84dcd179733ae4207ec0da302..aebfd9e100637a0276df1c7a8a2fc27d3f4325a3 100644 (file)
--- a/site/docs/4.4/components/modal.md
+++ b/site/docs/4.4/components/modal.md
@@ -139,7 +139,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 
 When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
 
-<div id="staticBackdropLive" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
+<div id="staticBackdropLive" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -172,7 +172,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -802,7 +802,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>backdrop</td>
       <td>boolean or the string <code>'static'</code></td>
       <td>true</td>
-      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click or on escape key press.</td>
+      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
     </tr>
     <tr>
       <td>keyboard</td>
@@ -897,7 +897,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
     </tr>
     <tr>
       <td>hidePrevented.bs.modal</td>
-      <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed.</td>
+      <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-keyboard</code> set to <code>false</code>.</td>
     </tr>
   </tbody>
 </table>