From fa9d28b634dbcf057778cd755bc52aedebffbe22 Mon Sep 17 00:00:00 2001
From: Emmanuel Bourgerie <emmanuel.bourgerie@teamaol.com>
Date: Mon, 16 Mar 2015 13:33:42 +0000
Subject: [PATCH] Fix #16072: Clicking into input field within dropdown no
longer closes the dropdown
Closes #16073 by merging it
---
js/dropdown.js | 2 ++
js/tests/unit/dropdown.js | 38 ++++++++++++++++++++++++++++++++++++++
2 files changed, 40 insertions(+)
diff --git a/js/dropdown.js b/js/dropdown.js
index 5e6cefe843..1fbf74a317 100644
--- 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 40c428682f..e0d1df9700 100644
--- 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')
+ })
})
--
GitLab