Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto-fill glitch for password input when embedded in <b-field> #1154

Closed
vinczebalazs opened this issue Jan 2, 2019 · 5 comments
Closed

Auto-fill glitch for password input when embedded in <b-field> #1154

vinczebalazs opened this issue Jan 2, 2019 · 5 comments

Comments

@vinczebalazs
Copy link

Overview of the problem

Buefy version: 0.7.1
Vuejs version: 1.12.3
OS/Browser: macOS 10.14.3 / Chrome, Safari, Opera

Description

When the browser tries to auto-fill a <b-input> with type=password after it has been dynamically added to the DOM, the value of the input quickly flashes and disappears. This behavior only happens when the <b-input> is nested in <b-field>.

The issue comes down to Chrome, Opera and Safari firing a @blur event after auto-filling the fields, which calls the checkHtml5Validity() function of the FormElementMixin. The checkHtml5Validity() updates the FieldBody component's message and type properties which I believe (?) re-renders the component causing this glitch.

This issue only occurs for fields with type=password, in which case calling checkHtml5Validity() does not make sense as it is used for passwords. A fix/workaround is to return from the checkHtml5Validity() function if the input is of type password.

Steps to reproduce

Fairly obvious, but the browser needs to have some auto-fill values saved for the domain (e.g. localhost:8080) you are running the reproduction sample app from.

Expected behavior

The password field should be auto-filled correctly.

Actual behavior

The auto-fill value flashes and disappears (from the GIF it looks as if it is not filled at all) from the password input.

demo gif

@jtommy
Copy link
Member

jtommy commented Jan 2, 2019

It could be the same bug of #898

@vinczebalazs
Copy link
Author

Looks similar to me. I guess it needs more investigation then. It definitely comes down to the checkHtml5Validity() function as this fixes it for passwords.

@jtommy
Copy link
Member

jtommy commented Jan 2, 2019

If you're right we should check that but not only for password

@vinczebalazs
Copy link
Author

I also found that this issue does not occur if there is only one <b-field> in the component. Changing one of the two <b-field> elements into a native Bulma field instead fixes the problem, just like it is mentioned here.

@jtommy
Copy link
Member

jtommy commented Jan 11, 2019

Fix 07d3897

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants