From: Chris Rebert <code@rebertia.com>
Date: Tue, 4 Nov 2014 02:35:35 +0000 (-0800)
Subject: Have Carousel ignore keyboard events from <input>s or <textarea>s; fixes #14991
X-Git-Tag: v3.3.1~40^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=469dc3ab1fb991027d073cd3ffe6907361b1f058;p=thirdparty%2Fbootstrap.git

Have Carousel ignore keyboard events from <input>s or <textarea>s; fixes #14991
---

diff --git a/js/carousel.js b/js/carousel.js
index 4e4e47797d..82106d278a 100644
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -42,6 +42,7 @@
   }
 
   Carousel.prototype.keydown = function (e) {
+    if (/input|textarea/i.test(e.target.tagName)) return
     switch (e.which) {
       case 37: this.prev(); break
       case 39: this.next(); break
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 6f0b9642fc..5998abe6af 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -478,6 +478,48 @@ $(function () {
     strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
   })
 
+  test('should ignore keyboard events within <input>s and <textarea>s', function () {
+    var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+        + '<div class="carousel-inner">'
+        + '<div id="first" class="item active">'
+        + '<img alt="">'
+        + '<input type="text" id="in-put">'
+        + '<textarea id="text-area"></textarea>'
+        + '</div>'
+        + '<div id="second" class="item">'
+        + '<img alt="">'
+        + '</div>'
+        + '<div id="third" class="item">'
+        + '<img alt="">'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+    var $template = $(templateHTML)
+    var $input = $template.find('#in-put')
+    var $textarea = $template.find('#text-area')
+
+    strictEqual($input.length, 1, 'found <input>')
+    strictEqual($textarea.length, 1, 'found <textarea>')
+
+    $template.bootstrapCarousel()
+
+    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+
+
+    $input.trigger($.Event('keydown', { which: 39 }))
+    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
+
+    $input.trigger($.Event('keydown', { which: 37 }))
+    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
+
+
+    $textarea.trigger($.Event('keydown', { which: 39 }))
+    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
+
+    $textarea.trigger($.Event('keydown', { which: 37 }))
+    strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
+  })
+
   test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
     var isMobile     = 'ontouchstart' in document.documentElement
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'