DEV Community

Jennifer Bradford
Jennifer Bradford

Posted on

Forms, Chrome, and Autofill

I recently had an issue that was unusual and a bit frustrating so I'm hoping this post will help someone if they get stuck.

I have a form that gets sent to one or two people from a list of about 50 depending on user selection in two select fields. I got an email from one person on the list that she was getting ALL the forms. I double checked the code to switch people based on selection several times and rewrote it once for good measure. All the tests were fine.

She was still getting all the forms though. I started manually testing the form and discovered that autofill settings in chrome had decided the select for organization names was actually a field for home states. I'm guessing it did that because one of the organisation names includes a state name.

My first attempt at fixing it was to just set autocomplete="off" on the field. That didn't do anything. While looking up solutions, I found that chrome overrides autocomplete="off".

To find everything chrome associates with a form field, go into chrome://flags and search for #show-autofill-type-predictions and set it to Enabled. Relaunch chrome and go to your form and hover over it. You will see a list of properties including heuristic type. This is what chrome will try to autofill.

Autocomplete has a set of tags you can use listed here. I added organization-title but that still didn't fix it or even update the heuristic type in chrome.

What finally made it work somewhat right was making the field read only until the user set focus on it.

Discussion (0)