diff --git a/js/src/button.js b/js/src/button.js index 0da25451190d9422a8eaf597ad0c86d18122feba..08654d558e46690b6c658ab94ec3d4f0aecfb92e 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -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) => { diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index e92d229e6d0c336ad2eb65ceea0005013e73708b..2adffedd9fe656b6bb698a1560cfb14d929cd94c 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -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">' +