From: Matheus Azzi <matheuslazzi@gmail.com>
Date: Sun, 16 Oct 2016 01:55:48 +0000 (-0300)
Subject: Carousel: Only prevents default for ARROW_LEFT and ARROW_RIGHT keys
X-Git-Tag: v4.0.0-alpha.6~228
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dab6a41e049de64653c8b91c28acf212137b0452;p=thirdparty%2Fbootstrap.git

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 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">'