I'm working on a project which has radio buttons to select between Metric and Imperial measurement systems and show inputs based on selection and the default checked button is Metric. Then I came across this weird behavior of firefox not returning to the default checked button on page reload!
I found out it's a known feature/bug on firefox as MDN states:
Unlike other browsers, Firefox by default persists the dynamic checked state of an
<input>
across page loads. Use the autocomplete attribute to control this feature.
And if I got it right the only solution is to use autocomplete="off"
attribute either on the form
or on the radio inputs themselves. I chose the latter as I don't want to disable the autocomplete feature for the whole form!
I was relieved until the W3C Validator yelled at me:
Error: Attribute autocomplete is only allowed when the input type is color, date, datetime-local, email, hidden, month, number, password, range, search, tel, text, time, url, or week.
And after a lot of searching and thinking I ended up checking on every page-load is imperial radio checked? and if so uncheck and recheck the default one!
Thank you firefox what a great feature!
cover image source: The quotes - Itβs a bug
Top comments (0)