Vuetify: [Bug Report] v-autocomplete cause builtin chrome autocomplete(autofill) break

Created on 5 Jun 2018  路  6Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.1.0-beta.2
Vue: 2.5.16
Browsers: Chrome 67.0.3396.62
OS: Windows 10

Steps to reproduce

Put cursor in any field and let chrome autocomplete popup appear ( need to have data in chrome autocomplete from other froms - https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill )
Click any item from the list.
Nothing happens.
If delete v-autocomplete - all works fine.
If enclose with v-form - all works fine.
In firefox seems to be working fine without any additional steps.

Expected Behavior

Form data filled

Actual Behavior

Nothing happens

Reproduction Link

https://codepen.io/aldarund/pen/rKLxpg

critical bug regression

Most helpful comment

Same here.

@aldarund use temporary css hack:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
transition-delay: 99999s;
-webkit-transition-delay: 99999s;
}

All 6 comments

Same here.

@aldarund use temporary css hack:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
transition-delay: 99999s;
-webkit-transition-delay: 99999s;
}

TLDL: Change autocomplete on v-autocomplete to browser-autocomplete

The reason this happens:

On v-text-field, the autocomplete attribute gets propagated to the _input_ field. On v-autocomplete, that property has no mean. The reason is that before it was abstracted, v-select had an autocomplete prop. In order to provide the dev with a way to change the actual input autocomplete settings, we added browser-autocomplete. Now that we have v-autocomplete as a standalone component we can safely deprecate this prop, but not until v1.2 after we have deprecated the autocomplete prop itself.

@johnleider hm, but why adding property that has no mean break other fields? I would expect it just not working for autocomplete ( and give some warning to user about it), not to break other fields completely. Thats kind of pretty bad behaviour, especially when there no warning or anything why this happens in console

Agreed, it is bad, but mistakes were made. We're trying to resolve it.

@johnleider maybe at least print some warning to user similar to deprecation warning?

It is very easy from a macro position to say "Hey, it's easy just do this", but that happens about 100 times a day. Maintaining the documentation is a herculean task and as an open source project this means we have to triage what gets attention and not everything shares the same level of importance.

Basically, if there is something you feel should be somewhere, it's infinitely better to reach out and see if we agree, and then PR the changes. Otherwise, we will get to it as soon as we can.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gluons picture gluons  路  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments

itanka9 picture itanka9  路  3Comments

smousa picture smousa  路  3Comments

jofftiquez picture jofftiquez  路  3Comments