Vuetify: [Bug Report] disabling autocomplete on v-form or individual v-text, etc. not working in Chrome

Created on 10 Jan 2020  路  7Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.2.3
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.117
OS: Windows 10

Steps to reproduce

This is reproducible through an A/B test:

Vuetify Component example

In the example component reproduction, once cloned and running, focus in any of the text fields. Most fields (except for "Username") will not be disabled, as expected.

JSFiddle example, not wrapped in Vuetify component

In the following JSFiddle from another user, it is noted that disabling autocomplete in Chrome actually works (reproduction steps in the JSFiddle): https://jsfiddle.net/AlexandrAbakumov/L0e2u7v4/144/

Expected Behavior

All text fields are autocomplete disabled when then autocomplete="off" prop is passed to v-form or any child v-text-field, etc. components.

Actual Behavior

Only the "Username" v-text-field is autocomplete disabled. All remaining text fields still autofill from Chrome's autofill history.

Reproduction Link

https://github.com/sjtipton/autocomplete-foo

Other comments

Regardless of any variations I do with the autocomplete prop (e.g. applying it to v-form vs. each individual v-text-field -- or even trying the obligatory autocomplete="nope" or autocomplete="new-password" that I've seen in MDN write-ups), nothing seems to jive in Chrome, when wrapped in the Vuetify component.

platform specific upstream wontfix

Most helpful comment

          autocomplete="new-password"

Works fine for me, I'm using it in different inputs not just password inputs.

I would suggest creating something that manages prefilled inputs. Right now when I enter a page with a prefilled form I see the prefilled text over the input label and that makes it look like a mess...

All 7 comments

Related: #8618

Chrome doesn't seem to give a shit, it just randomly decides to ignore the provided autocomplete value. No idea why the one without vuetify works, it's essentially identical just with fewer elements between the input and the form.

There was pretty extensive discussion in regards to the autocomplete fields. Unfortunately, there is nothing we can do.

Related https://github.com/vuetifyjs/vuetify/issues/9516 and https://github.com/vuetifyjs/vuetify/pull/9552

Possibly related https://github.com/vuetifyjs/vuetify/issues/10102

If you have any additional questions, please reach out to us in our Discord community.

@johnleider I believe setting autocompete attr to new instead of off should resolve the Chrome issue (seems working for me with inputs and comboboxes)

@OndraRehounek this didnt work for me. I tried this.

@OndraRehounek this didnt work for me. I tried this.

Same here, didn't work.

@ijunaid8989 @timothymarois yes, it stopped working for me with latest Chrome version as well...

          autocomplete="new-password"

Works fine for me, I'm using it in different inputs not just password inputs.

I would suggest creating something that manages prefilled inputs. Right now when I enter a page with a prefilled form I see the prefilled text over the input label and that makes it look like a mess...

Was this page helpful?
0 / 5 - 0 ratings