mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Dropdown handle keydown on input and textarea.

Browse Source
This commit is contained in:
Pierre-Denis Vanduynslager
2017-01-21 07:17:34 +02:00
committed by XhmikosR
parent d51a6c8db3
commit 6fe72c6de8
2 changed files with 165 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
js/tests/unit/dropdown.js
View File

@@ -457,8 +457,8 @@ $(function () {
$dropdown.trigger('click')
})
QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
assert.expect(3)
QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {
assert.expect(8)
var done = assert.async()
var dropdownHTML = '<div class="tabs">'
@@ -487,11 +487,27 @@ $(function () {
.on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
$input.trigger('focus').trigger($.Event('keydown', { which: 38 }))
assert.ok($(document.activeElement).is($input), 'input still focused')
// Space key
$input.trigger('focus').trigger($.Event('keydown', { which: 32 }))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 32 }))
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key up
$input.trigger('focus').trigger($.Event('keydown', { which: 38 }))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 }))
assert.ok($(document.activeElement).is($textarea), 'textarea still focused')
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key down
$input.trigger('focus').trigger($.Event('keydown', { which: 40 }))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 40 }))
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key escape
$input.trigger('focus').trigger($.Event('keydown', { which: 27 }))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
done()
})
@@ -499,6 +515,126 @@ $(function () {
$dropdown.trigger('click')
})
QUnit.test('should ignore space key events for <input>s within dropdown, and accept up, down and escape', function (assert) {
assert.expect(6)
var done = assert.async()
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<input type="text" id="input" data-toggle="dropdown">'
+ '<ul class="dropdown-menu" role="menu">'
+ '<li><a id="item1" href="#">Secondary link</a></li>'
+ '<li><a id="item2" href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $input = $('#input')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
// Key space
$input.trigger('focus').trigger($.Event('keydown', { which: 32 }))
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
assert.ok($(document.activeElement).is($input), 'input is still focused')
// Key escape
$input.trigger('focus').trigger($.Event('keydown', { which: 27 }))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
// Key down
$input.trigger('focus').trigger($.Event('keydown', { which: 40 }))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
// Key up
$input.trigger('focus').trigger($.Event('keydown', { which: 38 }))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done()
}).bootstrapDropdown('toggle')
$input.trigger('click')
})
$input.trigger('click')
})
$input.trigger('click')
})
QUnit.test('should ignore space key events for <textarea>s within dropdown, and accept up, down and escape', function (assert) {
assert.expect(6)
var done = assert.async()
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<textarea id="textarea" data-toggle="dropdown"></textarea>'
+ '<ul class="dropdown-menu" role="menu">'
+ '<li><a id="item1" href="#">Secondary link</a></li>'
+ '<li><a id="item2" href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
var $textarea = $('#textarea')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired')
// Key space
$textarea.trigger('focus').trigger($.Event('keydown', { which: 32 }))
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
assert.ok($(document.activeElement).is($textarea), 'textarea is still focused')
// Key escape
$textarea.trigger('focus').trigger($.Event('keydown', { which: 27 }))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
// Key down
$textarea.trigger('focus').trigger($.Event('keydown', { which: 40 }))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown
.parent('.dropdown')
.one('shown.bs.dropdown', function () {
// Key up
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 }))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done()
}).bootstrapDropdown('toggle')
$textarea.trigger('click')
})
$textarea.trigger('click')
})
$textarea.trigger('click')
})
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
assert.expect(2)
var done = assert.async()