DEV Community

Cover image for I'm not guilty it's firefox!
Ahmad Khalid
Ahmad Khalid

Posted on

2

I'm not guilty it's firefox!

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.

I was like

I'm not a criminal

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more