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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read 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