search

getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.32k stars 168 forks source link

[Panel] Field value is empty on chrome autofill #4312

Closed wdebusschere closed 2 years ago

wdebusschere commented 2 years ago

Description

I have some fields with names that trigger the Google chrome browser to autocomplete them. Example City, I can select the city suggested by the chrome browser, but because i’m not actually typing it, it is not saved… The character count stays on 0. It only saves when i click again on the selected value.

It also shows the character count is 0. I guess the input event has to be tuned in the javascript.

(I have also tested it with Safari, but there it works)

Expected behavior
Data entered by the browser autocomplete mechanism should be saved.

Screenshots
image image

To reproduce

Startkit->Panel->Edit a user
Fill in the city or zip with chrome autocomplete

Your setup

Kirby Version
Starterkit

Your system (please complete the following information)

afbora commented 2 years ago

To team

You can follow the related issue in the Vue repository https://github.com/vuejs/vue/issues/7058. It's a bug but I'm not sure if it's an issue we can fix 🤔

I also don't understand why autofill works even though autocomplete is false or off. Could it be a browser bug?

Few links about that:

lukasbestle commented 2 years ago

Since we use a <form>, can we use the onchange event to get notified of changes to the inputs?

distantnative commented 2 years ago

@lukasbestle Based on the discussion @afbora linked I understood this wouldn't work but just more complicated hacks?

lukasbestle commented 2 years ago

Yeah, doesn't seem to be 100 % reliable. Maybe it can at least help us most of the time (better than the status quo).

I'd really like to avoid an interval-based hack (too much wasted processing just for this). Not sure about the other suggestions, maybe one of them can work for us.

wdebusschere commented 2 years ago

Could this be a solution? add "name" attribute. https://lifesaver.codes/answer/chrome-autofill-does-not-trigger-change-7058

afbora commented 2 years ago

@wdebusschere This already referenced the link I posted first.

I've created a working code sample for you to play with. But I still couldn't find a solution.

https://jsfiddle.net/byybora/ugoevzf4/

afbora commented 2 years ago

I'm closing this issue because of this is definitely just a browser-specific bug and vuejs team already marked the related issue as browser quirks.