diff --git a/js/button.js b/js/button.js index 49a9b92928..252531cfe5 100644 --- a/js/button.js +++ b/js/button.js @@ -108,10 +108,15 @@ $(document) .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { - var $btn = $(e.target) - if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + var $btn = $(e.target).closest('.btn') Plugin.call($btn, 'toggle') - if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() + if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) { + // Prevent double click on radios, and the double selections (so cancellation) on checkboxes + e.preventDefault() + // The target component still receive the focus + if ($btn.is('input,button')) $btn.trigger('focus') + else $btn.find('input:visible,button:visible').first().trigger('focus') + } }) .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)) diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index d92a083296..de060eabda 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -22,6 +22,8 @@ <h1>Button <small>Bootstrap Visual Test</small></h1> </div> + <p>Try interacting via mouse, via keyboard, and via keyboard after first interacting via mouse. (Refresh the page between each trial.)</p> + <button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button"> Loading state </button>