Change button checkbox/radios to ignore hidden input fields (twbs#27802)

mvastola · XhmikosR · commit fc15c4c4ce13 · 2018-12-10T10:40:08.000+02:00
diff --git a/js/src/button.js b/js/src/button.js
@@ -29,7 +29,7 @@ const ClassName = {
 const Selector = {
   DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
   DATA_TOGGLE        : '[data-toggle="buttons"]',
-  INPUT              : 'input',
+  INPUT              : 'input:not([type="hidden"])',
   ACTIVE             : '.active',
   BUTTON             : '.btn'
 }
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
@@ -139,6 +139,29 @@ $(function () {
     assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
   })
 
+  QUnit.test('should only toggle selectable inputs', function (assert) {
+    assert.expect(6)
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+      '<label class="btn btn-primary active">' +
+      '<input type="hidden" name="option1" id="option1-default" value="false">' +
+      '<input type="checkbox" name="option1" id="option1" checked="true"> Option 1' +
+      '</label>' +
+      '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+
+    var $btn = $group.children().eq(0)
+    var $hidden = $btn.find('input#option1-default')
+    var $cb = $btn.find('input#option1')
+
+    assert.ok($btn.hasClass('active'), 'btn has active class')
+    assert.ok($cb.prop('checked'), 'btn is checked')
+    assert.ok(!$hidden.prop('checked'), 'hidden is not checked')
+    $btn.trigger('click')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+    assert.ok(!$cb.prop('checked'), 'btn is not checked')
+    assert.ok(!$hidden.prop('checked'), 'hidden is not checked') // should not be changed
+  })
+
   QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
     assert.expect(2)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const ClassName = {`
`29`	`29`	`const Selector = {`
`30`	`30`	`DATA_TOGGLE_CARROT : '[data-toggle^="button"]',`
`31`	`31`	`DATA_TOGGLE : '[data-toggle="buttons"]',`
`32`		`- INPUT : 'input',`
	`32`	`+ INPUT : 'input:not([type="hidden"])',`
`33`	`33`	`ACTIVE : '.active',`
`34`	`34`	`BUTTON : '.btn'`
`35`	`35`	`}`