Merge pull request #14000 from hnrch02/modal-keydown

Only close modal if escape was hit with keydown; fixes #13929

2 files changed, 40 insertions, 2 deletions

diff --git a/js/modal.js b/js/modal.js
index 29eedf117..92eff470a 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -135,11 +135,11 @@
 
   Modal.prototype.escape = function () {
     if (this.isShown && this.options.keyboard) {
-      this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
+      this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
         e.which == 27 && this.hide()
       }, this))
     } else if (!this.isShown) {
-      this.$element.off('keyup.dismiss.bs.modal')
+      this.$element.off('keydown.dismiss.bs.modal')
     }
   }
 
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index a415129aa..5ee58616f 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -164,6 +164,44 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  test('should close modal when escape key is pressed via keydown', function () {
+    stop()
+
+    var div = $('<div id="modal-test"/>')
+    div
+      .on('shown.bs.modal', function () {
+        ok($('#modal-test').length, 'modal insterted into dom')
+        ok($('#modal-test').is(':visible'), 'modal visible')
+        div.trigger($.Event('keydown', { which: 27 }))
+
+        setTimeout(function () {
+          ok(!$('#modal-test').is(':visible'), 'modal hidden')
+          div.remove()
+          start()
+        }, 0)
+      })
+      .bootstrapModal('show')
+  })
+
+  test('should not close modal when escape key is pressed via keyup', function () {
+    stop()
+
+    var div = $('<div id="modal-test"/>')
+    div
+      .on('shown.bs.modal', function () {
+        ok($('#modal-test').length, 'modal insterted into dom')
+        ok($('#modal-test').is(':visible'), 'modal visible')
+        div.trigger($.Event('keyup', { which: 27 }))
+
+        setTimeout(function () {
+          ok($('#modal-test').is(':visible'), 'modal still visible')
+          div.remove()
+          start()
+        }, 0)
+      })
+      .bootstrapModal('show')
+  })
+
   test('should trigger hide event once when clicking outside of modal-content', function () {
     stop()
     $.support.transition = false