From: Kotas Vlastimil <Vlastimil.Kotas@ysoft.com>
Date: Thu, 14 Jan 2016 16:41:36 +0000 (+0100)
Subject: Button toggling - trigger change event on input
X-Git-Tag: v4.0.0-alpha.6~403^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=866e99b00cb12dcfa0d9b88edf4f4d0ef06ca3f3;p=thirdparty%2Fbootstrap.git

Button toggling - trigger change event on input

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.
---

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