mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
avoid preventing input event onclick (#30992)
* 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:
parent
ba6d5e802b
commit
e9f039d1fe
@ -153,11 +153,10 @@ $(document)
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (initialButton.tagName === 'LABEL' && inputBtn && inputBtn.type === 'checkbox') {
|
if (initialButton.tagName !== 'LABEL' || inputBtn && inputBtn.type !== 'checkbox') {
|
||||||
event.preventDefault() // work around event sent to label and input
|
|
||||||
}
|
|
||||||
Button._jQueryInterface.call($(button), 'toggle')
|
Button._jQueryInterface.call($(button), 'toggle')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {
|
.on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {
|
||||||
const button = $(event.target).closest(SELECTOR_BUTTON)[0]
|
const button = $(event.target).closest(SELECTOR_BUTTON)[0]
|
||||||
|
@ -222,6 +222,46 @@ $(function () {
|
|||||||
assert.ok(!$btn2.find('input')[0].checked, 'btn2 is not checked')
|
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) {
|
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
|
||||||
assert.expect(2)
|
assert.expect(2)
|
||||||
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
|
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
|
||||||
|
Loading…
x
Reference in New Issue
Block a user