vue: Vue not detecting autofill changes

Here’s my SPA login login

The submit button is disabled, when the browser autofills my user/pass

Submit Markup

           <input type="submit" value="LOG IN" v-on="click: login($event)" class="btn btn-block btn-info btn-lg"
                       v-attr="disabled: (!email||!password||processing)"
                       tabindex="3">

Initial State
       data: function () {
            return {
                email: '',
                password: '',
                processing: false
            }
        },

Focusing the textboxes, causes the LOG IN button to be enabled

Google Chrome 45.0.2454.85 m

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 4
Comments: 34 (7 by maintainers)

Commits related to this issue

fix: use constant plugin NS close #1331 — committed to connor4312/vue by yyx990803 6 years ago

Most upvoted comments

@krivoops I ran into a similar situation as you and ended up basing a solution off of this article https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7

My mounted function ended up looking like this (dont copy paste this as this has code unique to my component 😊)

mounted() {
    var el = this.$el.getElementsByTagName('input')[0];
    const autoFillClass = 'input-dirty',
        onAutoFillStart = (el) => el.parentNode.classList.add(autoFillClass),
        onAutoFillCancel = (el) => el.parentNode.classList.remove(autoFillClass),
    onAnimationStart = ({ target, animationName }) => {
        switch (animationName) {
            case 'onAutoFillStart':
                this.updateInput(el)
                return onAutoFillStart(target)
            case 'onAutoFillCancel':
                this.updateInput(el)
                if (!el.value && !el.placeholder) {
                    return onAutoFillCancel(target)
                }
        }
    }
    el.addEventListener('animationstart', onAnimationStart, false)
}

This is not a beautiful solution but it does what we need it to do for our app. Good luck!

christophernewton on Dec 22, 2017

Hi guys, is there any advice how to correctly solve this in 2017?

palypster on Oct 25, 2017

Based on the previous answers, this solved my issue:

<input @animationstart="autoFilled = true" />

<style scoped lang="scss">
@keyframes autofillDetector {}
input:-webkit-autofill {
  animation-name: autofillDetector;
}
</style>

khalilbensaid96 on Jun 15, 2022

I have the same problem too, any advice?

shtse8 on Oct 25, 2017

Meh, that polyfill only works with jQuery/Angular. I guess we need an even more generic polyfill.

yyx990803 on Sep 18, 2015

Solution for WebKit browsers, this work for me.

makaria on Nov 8, 2018

Ya me too ! Anything new about this issue since ?

blephy on Nov 13, 2017

Can you try this: in your Vue instance’s compiled hook, do the following:

var el = this.$el
setTimeout(function () {
  $(el).find('input').trigger('change')
}, 20)

yyx990803 on Sep 18, 2015