Merge pull request #18900 from vlastikcz/v4-dev-buttonChange

Button toggling - trigger change event on input. Fixes #16673, fixes #17599.

2 files changed, 21 insertions, 1 deletions

diff --git a/js/src/button.js b/js/src/button.js
index 8b9511765..45e1424ff 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')
           }
 
           input.focus()
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 7fd86e13a..d87b57610 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">'