Bug: Endless input update after browser autocomplete

Hi. I found for a long time ago this strange behavior. https://drive.google.com/open?id=16aMBLuUe5lD5M3E0-HShbqdPrd1tzgV2
I think it's because of browser autocomplete. I haven't this problem on other field, so i think.
Also i`ve deployed it to heroku, and there this form looks well, because there browser autocomplete isn't work. Because of different domain.
So i believe, that problem with browser autocomplete

UPD: I have removed all passwords for my localhost from autocomplete, and problem is gone.
So it's definitely autocomplete cause this.

oh wow.. that's interesting. I'll do some testing to try and figure out what's happening

Interesting thing also, when i am trying to set focus earlier than browser, there is no bug.
When i am do anything until browser set focus, there is bug.

I also experienced similar bug.
I were need to get value from html element, to copy it in component data.
Because it seems like browser sets data earlier than vue adds listeners to it. IDK.
Probably there should be similar operation.
Also, maybe there

vue-atlas/src/Input/VaInput.vue

Line 258 in d33ea4d

value (val) {

need additional checking newVal !== oldVal ? WDYT ?

I was able to reproduce this and implement a fix in this commit: 6c5d4d6

autofill was stuck in a focus/blur loop. now, I use the CSS psuedo-class :webkit-autofill to apply an empty animation. I listen for the input's animationstart to prevent the infinite loop from happening.

Still not good.
Looks different, but behavior is same.

There just no yellow background.
It's maybe not good to remove it. Because users will think that site saved his password and email. Instead of browser autocomplete.

it is still looping for you? can you make sure it's not using a cached version of the bundle? I was able to reproduce the issue on my system and the fix above has worked well for me.

can you show me the code relevant to the form that exhibits this behavior?

good point. I'll bring back the yellow background.

https://dly-webclient.herokuapp.com/signin
Can u try also by following steps from the video ?
https://drive.google.com/open?id=1YTgMtfQG4F4Vkq4_2_a2B1elmjW8p47t

There 2.0.7 version.
I think there no cache, because there no yellow background.

hmm.. when I follow the same steps, everything is fine for me:

https://drive.google.com/file/d/1BHDsizeULoIb0YTPweviSo0OKJC2ee4I/view

Here is whole component. Maybe it will help to reproduce.

<template>
  <div class="signin_wrapper">
    <div class="signin_container">
      <h2>Авторизация</h2>
      <p>
        <va-form
          ref="form"
          type="vertical">
          <va-form-item label="Логин">
            <va-input
              id="auth-identifier"
              v-model="identifier"
              type="text"
              placeholder="Введите свой логин"/>
          </va-form-item>
          <va-form-item
            label="Пароль"
            for="auth-password">
            <va-input
              id="auth-password"
              v-model="password"
              type="password"
              placeholder="Введите свой пароль"/>
          </va-form-item>
          <div class="signin_submit">
            <va-button
              :disabled="!identifier || !password"
              :loading="loading"
              block
              type="primary"
              @click="handleSubmit">Войти
            </va-button>

          </div>
        </va-form>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Signin',
    layout: 'empty',
    data () {
      return {
        loading: false,
        identifier: null,
        password: null
      }
    },
    mounted () {
      // this.identifier = document.getElementById('auth-identifier').value
      // this.password = document.getElementById('auth-password').value
    },
    methods: {
      async handleSubmit () {
        this.loading = true
        try {
          await this.$store.dispatch('user/login', { identifier: this.identifier, password: this.password })
        } catch (e) {
          const message = this.parseErrorText(e.response.data)
          this.VaNotification.open({
            title: 'Ошибка',
            message,
            type: 'danger',
            duration: 2000
          })
          console.error(e)
        }
        this.loading = false
        let isSuccess = !!this.$store.state.user.user
        if (isSuccess) {
          this.$router.push('/requests/')
        }
      },
      parseErrorText (e) {
        switch (e.message) {
          case 'Identifier or password invalid.':
            return 'Логин или пароль введены неверно.'
          default:
            return 'Неизвестная ошибка.'
        }
      }
    }
  }
</script>

<style scoped>
  .signin_wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f4f5f7;
    display: -ms-flexbox;
    display: flex;
  }

  .signin_container {
    width: 300px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(9, 30, 66, .2), 0 6px 12px -7px rgba(9, 30, 66, .2);
    margin: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px 40px 30px;
  }

  .signin_submit {
    padding: .875rem 1.3rem;
  }
</style>

okay, I think I know what's going on. I'm working on a fix. in the meantime, you might be able to get around this by passing the autofocus prop to one of both of your inputs:

            <va-input
              autofocus
              id="auth-identifier"
              v-model="identifier"
              type="text"
              placeholder="Введите свой логин"/>

I believe this is fixed in 4b438b9

I previously brought back the autofill background by removing the very slow background transition effect on the -webkit-autofill pseudoclass, when I did this I effectively removed the CSS animation that I hook into, which broke autofill detection. whoops!

I brought back the -webkit-autofill transition to fix this, and made the transition much quicker.

please let me know if this is now fixed for you.. ~~you can clone the repo, yarn build and move the dist folder into your project's node_modules/vue-atlas folder, overwriting the dist you already have~~ 2.0.8 was just released to include this fix

Nope :( It isn't.
Also i see that if i set autofocus to first field, after autocomplete i am getting focus on second field.

that's because autofill is stealing focus to the last field it modifies. that is to be expected.

I'll keep debugging

please upgrade to 2.0.9 to see if this is still an issue for you. I believe the issue is resolved

Yes ! It is ! Thanks !

excellent! thanks for the issue