Discrepancy between .active and :checked in radio button groups when going back to a page via browser history

I have noticed that when I press the “previous” button in my browser, the page is reloaded from cache and the item shown as .active is not the one I clicked last, but the one initially defined as .active in the DOM. This might not match with the actual radio buttons state as the :checked one is the last one clicked. Checkboxes have the same behavior in a similar setup.

I figured a way to overcome this by not using the .active class in the DOM and setting it according to the :checked states of radio buttons at page load.

See this fiddle for an example of the bug, and the temporary fix: https://jsfiddle.net/pr_shadoko/saymu7wa/7/

Tested on : Windows 10 64bit Chrome 63.0.3239.84 / Firefox 57.0 / Opera 49.0 jQuery 3.2.1 BS 4.0.0-beta.3 popper 1.12.9

[cyclotron3k]

This is also an issue when selecting something in a radio button group using the keyboard.

[patrickhlauke]

toggle groups are among some of the most brittle constructs. wondering if there’s a chance to rework them to be pure CSS (maybe styling the label and using a sibling selector, rather than using an .active class on the parent)…