Merge pull request #19058 from Johann-S/carouselInput

Carousel - Do not prevent on keydown for input and textarea

2 files changed, 33 insertions, 2 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index b7f3b3a7a..d85082ce5 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -232,11 +232,10 @@ const Carousel = (($) => {
     }
 
     _keydown(event) {
-      event.preventDefault()
-
       if (/input|textarea/i.test(event.target.tagName)) {
         return
       }
+      event.preventDefault()
 
       switch (event.which) {
         case ARROW_LEFT_KEYCODE:
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 033ccfd6c..7fc4f4529 100644
--- 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)
+  })
 })