Button-ified checkbox won't fire click event

[JohanFredrikVaren]

OS: Mac OS X
UA: Chrome
Bootstrap version: 4 alpha5
Test case: https://codepen.io/jfvaren/pen/QdwmpV

When styling checkboxes and their labels as toggle buttons as detailed in the Bootstrap 4 documentation (https://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons), any event listeners registered on the checkbox elements are simply skipped upon clicking the buttons. Bootstrap's event handler calls event.preventDefault() (button.js line 142) which will prevent the label from triggering the subsequent click event on the checkbox element.

This seems a bit intrusive and may require existing JS to be re-written. In my own case I already have code adding event listeners to input elements, both where inputs and labels are peers and where labels envelop inputs, as required by Bootstrap. The code now has to add event listeners to both types of structures which only complicates the code.

I've tested the same case where I removed the event prevention, and it seems to work just fine.

[patrickhlauke]

From memory, the preventDefault was there to work around issues of custom radio/checkboxes and keyboard access (where, at least in v3, there were some funky inconsistencies between triggering with a mouse vs triggering with a keyboard due to click effectively firing twice in certain scenarios).

As some aspects around those radios/checkboxes has changed, it may be worth revisiting the associated JS to see if the original problem still persists). I'll need to set some time aside to investigate further.

[JohanFredrikVaren]

Good stuff, Patrick.

A little follow-up after trying to move my event handling up to the label element. My event handler performs a jQuery.serialize() on the form element. This fails because at that time the checkbox has yet to be checked/unchecked as a result of the click event on the label element. This fork of the first test case shows it in action: http://codepen.io/jfvaren/pen/mRJegp

I tried to code around this, but eventually came to sign on the side of the road saying "Here be dragons". So I retreated and concluded that moving the event listener to the label element doesn't solve anything, in my case.

[patrickhlauke]

closing this, as i believe this should now be fixed following #28834 ?