Skip to content

Commit fa9d28b

Browse files
Emmanuel Bourgeriecvrebert
authored andcommitted
Fix twbs#16072: Clicking into input field within dropdown no longer closes the dropdown
Closes twbs#16073 by merging it
1 parent 74ae498 commit fa9d28b

2 files changed

Lines changed: 40 additions & 0 deletions

File tree

js/dropdown.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@
9999

100100
if (!$parent.hasClass('open')) return
101101

102+
if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
103+
102104
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
103105

104106
if (e.isDefaultPrevented()) return

js/tests/unit/dropdown.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,4 +350,42 @@ $(function () {
350350

351351
assert.ok(!$(document.activeElement).parent().is('.disabled'), '.disabled is not focused')
352352
})
353+
354+
QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
355+
assert.expect(1)
356+
var dropdownHTML = '<div class="btn-group">'
357+
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
358+
+ '<ul class="dropdown-menu" role="menu">'
359+
+ '<li><input id="textField" type="text" /></li>'
360+
+ '</ul>'
361+
+ '</div>'
362+
var $dropdown = $(dropdownHTML)
363+
.appendTo('#qunit-fixture')
364+
.find('[data-toggle="dropdown"]')
365+
.bootstrapDropdown()
366+
.trigger('click')
367+
368+
$('#textField').trigger('click')
369+
370+
assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
371+
})
372+
373+
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
374+
assert.expect(1)
375+
var dropdownHTML = '<div class="btn-group">'
376+
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
377+
+ '<ul class="dropdown-menu" role="menu">'
378+
+ '<li><textarea id="textArea"></textarea></li>'
379+
+ '</ul>'
380+
+ '</div>'
381+
var $dropdown = $(dropdownHTML)
382+
.appendTo('#qunit-fixture')
383+
.find('[data-toggle="dropdown"]')
384+
.bootstrapDropdown()
385+
.trigger('click')
386+
387+
$('#textArea').trigger('click')
388+
389+
assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
390+
})
353391
})

0 commit comments

Comments
 (0)