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.

2 files changed, 21 insertions, 1 deletions

diff --git a/js/src/button.js b/js/src/button.js
index 3144a3f10..f5551f169 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 5648506cf..f0ce96488 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">'