Merge pull request #16404 from patrickhlauke/radio-checkbox-kbd-toggle-fix

Fix radio and checkbox keyboard handling in .btn-group

js/button.js

@@ -57,14 +57,18 @@
       var $input = this.$element.find('input')
       if ($input.prop('type') == 'radio') {
         if ($input.prop('checked')) changed = false
-        if (!$input.prop('checked') || !this.$element.hasClass('active')) $parent.find('.active').removeClass('active')
+        $parent.find('.active').removeClass('active')
+        this.$element.addClass('active')
+      } else if ($input.prop('type') == 'checkbox') {
+        if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
+        this.$element.toggleClass('active')
       }
-      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
+      $input.prop('checked', this.$element.hasClass('active'))
+      if (changed) $input.trigger('change')
     } else {
       this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
+      this.$element.toggleClass('active')
     }
-
-    if (changed) this.$element.toggleClass('active')
   }
 
 
@@ -107,7 +111,7 @@
       var $btn = $(e.target)
       if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
       Plugin.call($btn, 'toggle')
-      if (!$(e.target).is('input[type="radio"]')) e.preventDefault()
+      if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault()
     })
     .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
       $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))

js/tests/unit/button.js

@@ -130,19 +130,6 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
-  QUnit.test('should toggle active when btn children are clicked within btn-group', function (assert) {
-    assert.expect(2)
-    var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
-    var $btn = $('<button class="btn">fat</button>')
-    var $inner = $('<i/>')
-    $btngroup
-      .append($btn.append($inner))
-      .appendTo('#qunit-fixture')
-    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $inner.trigger('click')
-    assert.ok($btn.hasClass('active'), 'btn has class active')
-  })
-
   QUnit.test('should check for closest matching toggle', function (assert) {
     assert.expect(12)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">'