From 4fdd421ffd9aff303e2d2c90e1e9473d09c1fff3 Mon Sep 17 00:00:00 2001
From: Giovanni Mendoza <mendozagioo@gmail.com>
Date: Wed, 8 Jan 2020 12:54:17 -0600
Subject: [PATCH 1/2] Close modal with keyboard=true & backdrop=static

---
 js/src/modal.js                           |  7 ++-
 js/tests/unit/modal.spec.js               | 58 +++++++++++++++++++++++
 site/content/docs/4.3/components/modal.md |  8 ++--
 3 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index e2b711e5be38..48ff5b8540b9 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -306,9 +306,12 @@ class Modal {
   }
 
   _setEscapeEvent() {
-    if (this._isShown && this._config.keyboard) {
+    if (this._isShown) {
       EventHandler.on(this._element, 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.spec.js b/js/tests/unit/modal.spec.js
index 2edef22b2c23..b4923ab3f41b 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -567,6 +567,64 @@ describe('Modal', () => {
       modal.show()
     })
 
+    it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" /></div>'
+
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl, {
+        backdrop: 'static',
+        keyboard: true
+      })
+
+      const shownCallback = () => {
+        setTimeout(() => {
+          expect(modal._isShown).toEqual(false)
+          done()
+        }, 10)
+      }
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        const keydownEscape = createEvent('keydown')
+        keydownEscape.which = 27
+
+        modalEl.dispatchEvent(keydownEscape)
+        shownCallback()
+      })
+
+      modal.show()
+    })
+
+    it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" /></div>'
+
+      const modalEl = fixtureEl.querySelector('.modal')
+      const modal = new Modal(modalEl, {
+        backdrop: 'static',
+        keyboard: false
+      })
+
+      const shownCallback = () => {
+        setTimeout(() => {
+          expect(modal._isShown).toEqual(true)
+          done()
+        }, 10)
+      }
+
+      modalEl.addEventListener('shown.bs.modal', () => {
+        const keydownEscape = createEvent('keydown')
+        keydownEscape.which = 27
+
+        modalEl.dispatchEvent(keydownEscape)
+        shownCallback()
+      })
+
+      modalEl.addEventListener('hidden.bs.modal', () => {
+        throw new Error('Should not hide a modal')
+      })
+
+      modal.show()
+    })
+
     it('should not adjust the inline body padding when it does not overflow', done => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
 
diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index 15a3eeabf198..34973e9ccd25 100644
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -144,7 +144,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">
@@ -177,7 +177,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">
@@ -810,7 +810,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>
@@ -918,7 +918,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> in <code>false</code>.</td>
     </tr>
   </tbody>
 </table>

From c6f4b69196d564048588c0b8531c442ed974e245 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 10 Jan 2020 11:00:45 +0200
Subject: [PATCH 2/2] Update modal.md

---
 site/content/docs/4.3/components/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index 34973e9ccd25..6571a5ce494a 100644
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -918,7 +918,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 with the keyboard option or <code>data-keyboard</code> in <code>false</code>.</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>