rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

avoid preventing input event onclick (#30992)

Browse Source 
* instead of stopping event if onclick is triggered on input, call toggle method only if its not on checkbox inside a label

* add unit test

* add a dedicated test to ensure click event is forward to label

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Laussel Loïc 2020-06-10 14:45:31 +02:00 committed by GitHub
parent ba6d5e802b
commit e9f039d1fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/button.js
View File

@ -153,10 +153,9 @@ $(document)
return
}
if (initialButton.tagName === 'LABEL' && inputBtn && inputBtn.type === 'checkbox') {
event.preventDefault() // work around event sent to label and input
if (initialButton.tagName !== 'LABEL' || inputBtn && inputBtn.type !== 'checkbox') {
Button._jQueryInterface.call($(button), 'toggle')
}
Button._jQueryInterface.call($(button), 'toggle')
}
})
.on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {

40
js/tests/unit/button.js
View File

@ -222,6 +222,46 @@ $(function () {
assert.ok(!$btn2.find('input')[0].checked, 'btn2 is not checked')
})
QUnit.test('should fire click event on input', function (assert) {
assert.expect(1)
var done = assert.async()
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' +
'<input type="checkbox" id="option1"> Option 1' +
'</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn = $group.children().eq(0)
$group.find('input').on('click', function (e) {
e.preventDefault()
assert.ok(true, 'click event fired')
done()
})
$btn[0].click()
})
QUnit.test('should fire click event on label', function (assert) {
assert.expect(1)
var done = assert.async()
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' +
'<input type="checkbox" id="option1"> Option 1' +
'</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn = $group.children().eq(0)
$group.find('label').on('click', function (e) {
e.preventDefault()
assert.ok(true, 'click event fired')
done()
})
$btn[0].click()
})
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">' +