0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

Carousel: Only prevents default for ARROW_LEFT and ARROW_RIGHT keys

Fixes 2 bugs:

1. All keydowns were being prevented. Because of that the user wasn't able to navigate in the whole page using ARROW_UP/ARROW_DOWN.

2. Even when  is an input or textarea the keydowns were being prevented. Because of that the user wasn't able to type any text on these elements.
This commit is contained in:
Matheus Azzi 2016-10-15 22:55:48 -03:00 committed by Bardi Harborow
parent 1d6cdb65b3
commit dab6a41e04
2 changed files with 33 additions and 0 deletions

View File

@ -245,9 +245,11 @@ const Carousel = (($) => {
switch (event.which) {
case ARROW_LEFT_KEYCODE:
event.preventDefault()
this.prev()
break
case ARROW_RIGHT_KEYCODE:
event.preventDefault()
this.next()
break
default:

View File

@ -507,6 +507,37 @@ $(function () {
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
})
QUnit.test('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', function (assert) {
assert.expect(2)
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="carousel-item active">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
var done = assert.async()
var eventArrowDown = $.Event('keydown', { which: 40 })
var eventArrowUp = $.Event('keydown', { which: 38 })
$template.one('keydown', function (event) {
assert.strictEqual(event.isDefaultPrevented(), false)
})
$template.trigger(eventArrowDown)
$template.one('keydown', function (event) {
assert.strictEqual(event.isDefaultPrevented(), false)
done()
})
$template.trigger(eventArrowUp)
})
QUnit.test('should support disabling the keyboard navigation', function (assert) {
assert.expect(3)
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'