Fix #16072: Clicking into input field within dropdown no longer closes the dropdown

Closes #16073 by merging it

diff --git a/js/dropdown.js b/js/dropdown.js
index 5e6cefe84375bb8fc7ea4272e6a324c5e0c154a8..1fbf74a3177a707673386a1fd068b77a611717fb 100644 (file)
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -99,6 +99,8 @@
 
       if (!$parent.hasClass('open')) return
 
+      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+
       $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
 
       if (e.isDefaultPrevented()) return

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 40c428682fbf099ffedf95c1be9b4f7745b4f0f9..e0d1df97007a612aa5b274d736cf2e11bfab2670 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -350,4 +350,42 @@ $(function () {
 
     assert.ok(!$(document.activeElement).parent().is('.disabled'), '.disabled is not focused')
   })
+
+  QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
+    assert.expect(1)
+    var dropdownHTML = '<div class="btn-group">'
+        + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><input id="textField" type="text" /></li>'
+        + '</ul>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+      .trigger('click')
+
+    $('#textField').trigger('click')
+
+    assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+  })
+
+  QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
+    assert.expect(1)
+    var dropdownHTML = '<div class="btn-group">'
+        + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><textarea id="textArea"></textarea></li>'
+        + '</ul>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+      .trigger('click')
+
+    $('#textArea').trigger('click')
+
+    assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+  })
 })