[Bug Report] Problem with disabling auto-complete on text-field with type "password"

[ObiWanKenobi]

Versions and Environment

Vuetify: 0.17.3
Vue: 2.5.3
Browsers: Chrome 63.0.3239.84
OS: Mac OS 10.13.1

Steps to reproduce

https://i.snag.gy/TXN1Kd.jpg

I can't disable Google's autocomplete on v-text-field's with "password"-type. I've tried autocomplete="off".

<v-text-field
    name="password"
    label="Password"
    type="password"
    v-model="password"
    :disabled="working"
    :rules="passwordRule"
    required
/>

Expected Behavior

That the component stops googles autocomplete

Actual Behavior

It does not stop the autocomplete

[manico]

That does not sound like autocomplete but Chrome autofill feature.

[KaelWD]

autocomplete="off" doesn't work for login forms

[kgrosvenor]

this is a UI bug, i just raised the same issue - if field has some text in it, we could add the class that adds the label above on the page render, can we re open this issue?

[kgrosvenor]

And for me this also only happens when go the login page on a fresh window, or i refresh it - if i start on another router view then go to the login screen, it's fine

[amazzoccone]

Someone with a solution for this bug?

[ElMatella]

I hate to do that, but because autocomplete="off" does not work I used autocomplete="new-password' on each of my inputs and it works... I hope Chrome will find a better way to handle that because all Vue/React/Angular devs have problems with that and fix it with nasty hacks

[Flamenco]

I created a mixin that solves the issue on Chrome. Add it to the component that creates your text fields, selects, combos, autocompletes, etc.

/*
This Vue mixin will prevent Chrome autocomplete on text fields by setting autocomplete='new-password' where autocomplete='off' for every input that exists inside a component.
 
The DOM is checked on every update.

 */

const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

const mixin = {
  methods: {
    _repairAutocomplete() {
      const el = this.$el
      el.querySelectorAll('input[type="text"][autocomplete="off"').forEach(it => {
        it.setAttribute('autocomplete', 'new-password')
      })
    }
  },
  mounted() {
    this._repairAutocomplete()
  },
  updated() {
    this._repairAutocomplete()
  }
}

export default isChrome ? mixin : {}

[chris104957]

Sorry for digging up an old thread, but after being unable to find the solution to this, I finally managed to get it working like this:

<v-text-field
  id="password" 
  browser-autocomplete="new-password" <==== this bit
  prepend-icon="lock" 
  name="password" 
  hide-details
  label="Password"
  outline
  type="password" 
  v-model="password"
></v-text-field>

It still behaves a bit weirdly - If I put browser-autocomplete="new-password" on my username field, then it doesn't do anything. However, if I put it on my password field, then it works as expected, but also prevents autocomplete on any other field in the same form

I'm sharing it here in case it helps anyone else, as this is the first page that I landed on when Googling the problem

[baggrek]

change label to placeholder, and this fixing in same issue

[clouder]

I wouldn't say it's a problem, but this behavior still exists today. I found this issue having a Google search. Piggy backing off of @baggrek suggestion (which didn't help in my case), the solution I came up with was to change the name attribute on the v-autocomplete. Google Auto FIll makes assumtions about what the field is, I'm guessing based on that attribute and possbily also the contents of the select. To fix this, just give it a name and stay away from generic names such as 'name', 'firstname', 'address', If you want to use something like 'name' you can prepend it much the same way we do with our vue components anyway. i.e. name='myapp-name'.

Hope this helps other who google search the same thing I did

Sorry for bumping an old closed issue

[henon]

To follow up on chris' post above: I tried browser-autocomplete and got this message

[Vuetify] [BREAKING] 'browser-autocomplete' has been removed, use 'autocomplete' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide

changing to autocomplete="new-password" did turn off chrome's autofill for me

[bob-lee]

@clouder comment help me to defeat autofill.

              <v-text-field
                v-model="editedItem.region"
                :autocomplete="autocomplete"
                name="editedItem.region"

with data autocomplete: new Date().getTime().toString(),

This trick worked on all v-text-field but not on v-combobox which still shows some suggestion.

[neiromendez]

sadly this not work for me, only when I press the space on android mobile chrome @bob-lee

[kremda]

The only workaround that works for me is to set some random name :name="Math.random()"

[ElMatella]

@kremda same here. Setting name to an uuid/v4 value to be sure that it is unique across time ;)

[jhallinan]

The only workaround that works for me is to set some random name :name="Math.random()"

This worked for me. Quite ridiculous the effort involved in preventing autofill.

[onegeco]

This solved the problem for me by adding autocomplete="new-password"

[u-nel]

autocomplete="null"

Thank me later.