I discovered today an interesting “bug” in Internet Explorer 11 (and Edge!*) today that hopefully you’ll never come across:

<label>
  Some label text
  <input type="checkbox">
</label>

The above works fine — clicking anywhere on the label, including the text, checks and unchecks the checkbox. However:

<label>
  Some label text
  <input type="hidden">
  <input type="checkbox">
</label>

The above no longer works in IE 11. It appears that the click event is being sent to the first input within the label, even if that input is type="hidden".

All you Rails folks watch out — you may or may not know, but the Rails form checkbox helpers generate hidden inputs automatically.

Hopefully you won’t waste an hour and a half like I did! :)

* Update, June 24, 2016: @HerrSerker reports that the same behavior is present in Microsoft Edge.