[Panel] Field value is empty on chrome autofill

[wdebusschere]

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

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)

• Browser: Chrome Version 101.0.4951.64 (Official Build) (x86_64)

[afbora]

To team

You can follow the related issue in the Vue repository vuejs/vue#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:

• https://adamsilver.io/blog/stopping-chrome-from-ignoring-autocomplete-off/
• https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

[lukasbestle]

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

[distantnative]

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

[lukasbestle]

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]

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

[afbora]

@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]

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.