search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
546 stars 41 forks source link

Autofill username and password don't cause labels to float on chrome #71

Closed turbobuilt closed 2 years ago

turbobuilt commented 2 years ago

Hello, thanks for a great library!

Unfortunately on Chrome when I have w-input for email and password, the autofill values don't cause the labels to float so it looks awful. To fix it, we can poll to see if element.matches(":-webkit-autofill") is true. If it is, we can then go ahead and raise the label. Obviously this shouldn't happen for all items, but I think there should be a prop that is called detect-autofill or something like that which will do a setInterval for a few seconds to make sure to raise the labels once it gets auto filled.

antoniandre commented 2 years ago

Hi @turbobuilt, Sorry for the delay.

Thanks for the suggestion and piece of code to use. 👍 But could you give a reproduction link or your piece of code, because when I use the autofill on Chrome it looks good on my end: https://codepen.io/antoniandre/pen/PoJmoZJ?editors=1000

In addition, I already have this piece of code to move the label up: https://github.com/antoniandre/wave-ui/commit/884fb96554b615bff6eb290689c098511bc1b17e#diff-a369dc99eb76a8e49e8b82c3aa5ff70bf6ac01aa39cb48916b3687cb33899930R340

Let me know if this is still happening :)

turbobuilt commented 2 years ago

Hi @antoniandre, that reproduction link you gave doesn’t cause the issue for some reason because the username/password isn’t pre-filled. But I noticed it only happens when I load the login page of my app directly, first thing. The moment the page loads, chrome auto fills login information. As soon as I click anywhere in the page, the labels raise themselves. But for some reason it waits for first interaction in order to apply that css style that should raise the label. I don’t understand why. Perhaps it’s a chrome bug. But the code pen login doesn’t get pre filled, so it doesn’t show the issue. I haven’t had time to make a new repo that can demonstrate it but I will try to do it soon. Thanks for your help and your great work on this library. It’s da bomb!

Sent from my iPhone

On Dec 16, 2021, at 2:39 PM, Antoni @.***> wrote:

 Hi @turbobuilt, Sorry for the delay.

Thanks for the suggestion and piece of code to use. 👍 But could you give a reproduction link or your piece of code, because when I use the autofill on Chrome it looks good on my end: https://codepen.io/antoniandre/pen/PoJmoZJ?editors=1000

In addition, I already have this piece of code to move the label up: 884fb96#diff-a369dc99eb76a8e49e8b82c3aa5ff70bf6ac01aa39cb48916b3687cb33899930R340

Let me know if this is still happening :)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

antoniandre commented 2 years ago

Thanks for the feedback :) No worries, I will wait for your repro, as I couldn't reproduce even with the autofill on page load. Let me know, so I can investigate then!

antoniandre commented 2 years ago

Hi @turbobuilt,

I found a way to reproduce the issue on a https domain. You probably had this happening on Chrome: it worked on Firefox, and Safari always prompts you before autofilling. I fixed the issue using your piece of code. 👍 The w-input will be doing the detection by itself, you don't need a prop for that. Could you confirm it's fixed on your end in version 1.45.13?

Cheers!

turbobuilt commented 2 years ago

Hi @antoniandre I can't test it out because I'm on v2x, and because the project I'm on is not in a state to be deployed right now. Thanks for fixing the bug. It was so clever to figure out that it happens only on https. If I have a problem I will let you know. Thanks so much for the hard work.

antoniandre commented 2 years ago

Hey @turbobuilt, I also released this fix on version 2.29.0 yesterday if you're interested. :) Cheers!