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:
parent
1d6cdb65b3
commit
dab6a41e04
@ -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:
|
||||
|
@ -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">'
|
||||
|
Loading…
x
Reference in New Issue
Block a user