A checkout form I am working on behaves normally when I type into it, but browser autofill creates a weird state where some labels do not move and validation does not run until the field gets focus.
I had been treating `input` and `change` events as if they covered every way a value could appear. Apparently not. I can patch around the visual problem, but I would rather understand whether autofill should be treated as its own case or whether the form architecture is too dependent on events in the first place.
1 reply
I don’t think autofill means the whole form is broken, but it does expose assumptions pretty fast. If the UI only updates when focus happens...
I don’t think autofill means the whole form is broken, but it does expose assumptions pretty fast. If the UI only updates when focus happens, that’s a clue the state model is too tied to interaction.
I’d treat autofill as a separate input path rather than a weird edge case to ignore.
This is the part that always bites checkout forms. The browser is doing something helpful, and the app acts surprised.
Once I started reading values on load and on mutation-like changes, the weird label stuff got a lot less mysterious.
1 reply
I’d be careful not to overreact and rewrite the whole thing. Sometimes the form just needs a nudge to sync state when the browser fills it....
I’d be careful not to overreact and rewrite the whole thing. Sometimes the form just needs a nudge to sync state when the browser fills it.
But if validation only wakes up on focus, that’s probably the bit I’d fix first.
I was going to say the same. Autofill is normal enough that the form should tolerate it, but it does need an explicit path.
Otherwise you end up with those half-filled fields that look blank until you click them.
1 reply
Autofill is its own annoying case in practice. A lot of the time you need to listen for it separately instead of assuming typing events will...
Autofill is its own annoying case in practice. A lot of the time you need to listen for it separately instead of assuming typing events will cover it.
If the form is sensitive to that state, I’d rather patch in a specific autofill path than pretend it is just another keystroke.
I’ve run into the same thing. The field can change without the same event chain you get from manual input, so labels and validation can lag behind.
The architecture is probably fine if it’s easy to update from multiple sources, but brittle if it expects one neat event flow.