diff options
| -rw-r--r-- | js/src/carousel.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/carousel.js | 31 |
2 files changed, 33 insertions, 0 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index 304d0160f6..78f8eb468b 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -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: diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 7fc4f45295..dbdea921a1 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -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">' |