From 866e99b00cb12dcfa0d9b88edf4f4d0ef06ca3f3 Mon Sep 17 00:00:00 2001
From: Kotas Vlastimil <Vlastimil.Kotas@ysoft.com>
Date: Thu, 14 Jan 2016 17:41:36 +0100
Subject: [PATCH] Button toggling - trigger change event on input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling.

When the checkbox or radio state is changed, there should be triggered the change event. Currently, the change event is triggered on the Button, which is not correct. Only input fields do support the change event.
---
 js/src/button.js        |  2 +-
 js/tests/unit/button.js | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/src/button.js b/js/src/button.js
index 3144a3f101..f5551f169e 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -90,7 +90,7 @@ const Button = (($) => {
 
           if (triggerChangeEvent) {
             input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
-            $(this._element).trigger('change')
+            $(input).trigger('change')
           }
         }
       } else {
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 5648506cf5..f0ce96488f 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -72,6 +72,26 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should trigger input change event when toggled button has input field', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+      + '<label class="btn btn-primary">'
+      + '<input type="radio" id="radio" autocomplete="off">Radio'
+      + '</label>'
+      + '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+
+    $group.find('input').on('change', function (e) {
+      e.preventDefault()
+      assert.ok(true, 'change event fired')
+      done()
+    })
+
+    $group.find('label').trigger('click')
+  })
+
   QUnit.test('should check for closest matching toggle', function (assert) {
     assert.expect(12)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">'