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

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

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

+29

ElMatella on Jul 30, 2018

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

+24

chris104957 on Nov 2, 2018

Someone with a solution for this bug?

+17

amazzoccone on Mar 23, 2018

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

+10

kremda on May 13, 2020

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 on Jan 21, 2018

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

KaelWD on Dec 17, 2017

autocomplete=“null”

Thank me later.

u-nel on May 24, 2022

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

henon on Apr 8, 2020

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

clouder on Apr 7, 2020

This solved the problem for me by adding autocomplete=“new-password” <v-text-field v-model="form.transaction_pin" outlined required :rules="[rules.required]" type="password" autocomplete="new-password"> </v-text-field>

onegeco on Nov 3, 2021