Carousel - Do not prevent on keydown for input and textarea

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 34cab4391d13f93f7797b13c12ccf5c032cad69c..0ed4b7b5fe34cd7d7a9aab9dd17187d48e60bfb0 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -229,11 +229,10 @@ const Carousel = (($) => {
     }
 
     _keydown(event) {
-      event.preventDefault()
-
       if (/input|textarea/i.test(event.target.tagName)) {
         return
       }
+      event.preventDefault()
 
       switch (event.which) {
         case 37: this.prev(); break

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index d6d0186e15d0dc2b0d6486bb34dc6eb97b6f8965..8fac87d9884e802431ca75090c175b12e70bf44d 100644 (file)
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -759,4 +759,36 @@ $(function () {
       .bootstrapCarousel('prev')
     assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
   })
+
+  QUnit.test('should not prevent keydown for inputs and textareas', 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">'
+            + '<input type="text" id="inputText" />'
+          + '</div>'
+          + '<div id="second" class="carousel-item active">'
+            + '<textarea id="txtArea"></textarea>'
+          + '</div>'
+        + '</div>'
+        + '</div>'
+    var $template = $(templateHTML)
+    var done = assert.async()
+    $template.appendTo('#qunit-fixture')
+    var $inputText = $template.find('#inputText')
+    var $textArea = $template.find('#txtArea')
+    $template.bootstrapCarousel()
+
+    var eventKeyDown = $.Event('keydown', { which: 65 }) // 65 for "a"
+    $inputText.on('keydown', function (event) {
+      assert.strictEqual(event.isDefaultPrevented(), false)
+    })
+    $inputText.trigger(eventKeyDown)
+
+    $textArea.on('keydown', function (event) {
+      assert.strictEqual(event.isDefaultPrevented(), false)
+      done()
+    })
+    $textArea.trigger(eventKeyDown)
+  })
 })