Autocomplete = "off" not working

This seems to be a never ending fight with Google to respect the autofill/autocomplete. There are hackable solutions that may work, but I haven't had a ton of luck.

Check a look at this example thread with some possible solutions https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

@mostafalaravel

I once had this problem on a text field. No matter what I did, Chrome insisted on auto filling/completing. I eventually discovered changing the id/name of the element solved the problem. It's like Chrome has some hard-coded keywords it looks for and is bent on autofilling them. If the problem persists with the proposed hacks, try changing the id/name to something that doesn't contain "title" or "address", etc.

@talinon

I just discovered something else! they also see to the <label> tag!

because if it has the word "name" or "date" ... this will activate the autocomplete

<div class="form-group">
                                            <label for="inputCertificationBody">Certification body name</label>
                                             <input autocomplete="off"
                                                    class="form-control"
                                                    id="inputCertificationBody"
                                                    placeholder="Certification body name"
                                                    type="text"
                                                    v-model="newTraining.certificationBodyName">

as you can see label has the word "name" ==> result : autocomplete

<div class="form-group">
                                            <label for="inputCertificationBody">Certification body </label>
                                             <input autocomplete="off"
                                                    class="form-control"
                                                    id="inputCertificationBody"
                                                    placeholder="Certification body name"
                                                    type="text"
                                                    v-model="newTraining.certificationBodyName">

without that word , ==> result no autocomplete.

and in this case i have no choice because I cant remove the word "name"

Try removing the for attribute and see if that bypasses it.

@talinon unfortunately it's not working

Maybe try using something other than a label element?

You'll just need to try different things. It's annoying behaviour from Chrome that I don't think is documented anywhere, unfortunately.

You can try what they suggest here, and use non-standard attribute values. Chrome does this on purpose, so you can't really turn it off. Chrome is the new IE as far as not following well-established standards and just doing whatever they want.

as an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164