diff options
| author | Fabrice Daugan <fabrice.daugan@gmail.com> | 2016-02-14 19:08:03 +0300 |
|---|---|---|
| committer | Chris Rebert <code@chrisrebert.com> | 2016-02-16 15:38:05 +0300 |
| commit | ad1e98d094468279da541de6b695681b169da8b3 (patch) | |
| tree | 9c0591a111efa7a30423af848bffff85895e659e /js | |
| parent | ad5e6565cc854e7d36aa5875cd93a387f01b143a (diff) | |
button.js: Fix keyboard navigation
This PR fixes the keyboard navigation again while still keeping #16223 fixed.
Closes #19192
Diffstat (limited to 'js')
| -rw-r--r-- | js/button.js | 11 | ||||
| -rw-r--r-- | js/tests/visual/button.html | 2 |
2 files changed, 10 insertions, 3 deletions
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> |