Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix radio button toggle behavior for keyboard users #16226

Merged
merged 2 commits into from
Apr 17, 2015
Merged

Fix radio button toggle behavior for keyboard users #16226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b9baa0
Don't preventDefault radio buttons
patrickhlauke Apr 3, 2015
66d7113
Fix existing radio button unit test
patrickhlauke Apr 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions js/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
else $parent.find('.active').removeClass('active')
if ($input.prop('checked')) changed = false
if (!$input.prop('checked') || !this.$element.hasClass('active')) $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
} else {
Expand Down Expand Up @@ -107,7 +107,7 @@
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure your check needs to happen before this line; otherwise, $btn will always be the label.btn.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup, absolutely right. amended below by referencing e.target instead

Plugin.call($btn, 'toggle')
e.preventDefault()
if (!$(e.target).is('input[type="radio"]')) 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))
Expand Down
4 changes: 2 additions & 2 deletions js/tests/unit/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,13 +167,13 @@ $(function () {
assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
$btn2.find('input').trigger('click')
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')

$btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
})
Expand Down