Merge pull request #15088 from twbs/dropdown-keydown-ignores

Dropdown: ignore keydown events coming from `input`s and `textarea`s

2 files changed, 42 insertions, 1 deletions

diff --git a/js/dropdown.js b/js/dropdown.js
index ae192e570..64ec34d5d 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -55,7 +55,7 @@
   }
 
   Dropdown.prototype.keydown = function (e) {
-    if (!/(38|40|27|32)/.test(e.which)) return
+    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
 
     var $this = $(this)
 
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 335795fde..3cdf637ee 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -224,4 +224,45 @@ $(function () {
     $(document.body).click()
   })
 
+  test('should ignore keyboard events within <input>s and <textarea>s', function () {
+    stop()
+
+    var dropdownHTML = '<ul class="tabs">'
+        + '<li class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><a href="#">Secondary link</a></li>'
+        + '<li><a href="#">Something else here</a></li>'
+        + '<li class="divider"/>'
+        + '<li><a href="#">Another link</a></li>'
+        + '<li><input type="text" id="input"></li>'
+        + '<li><textarea id="textarea"/></li>'
+        + '</ul>'
+        + '</li>'
+        + '</ul>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    var $input = $('#input')
+    var $textarea = $('#textarea')
+
+    $dropdown
+      .parent('.dropdown')
+      .on('shown.bs.dropdown', function () {
+        ok(true, 'shown was fired')
+
+        $input.focus().trigger($.Event('keydown', { which: 38 }))
+        ok($(document.activeElement).is($input), 'input still focused')
+
+        $textarea.focus().trigger($.Event('keydown', { which: 38 }))
+        ok($(document.activeElement).is($textarea), 'textarea still focused')
+
+        start()
+      })
+
+    $dropdown.click()
+  })
+
 })