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.

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 304d0160f682ccb976253242427d521f27683842..78f8eb468b0a5a201009e6fdb70eab86e7898805 100644 (file)
--- 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 7fc4f4529598fde9a0ac17d9eeb89e081f72d459..dbdea921a1d5656148744cbb5fff8b3373f423b7 100644 (file)
--- 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">'