Single-line text fields do not work with auto-filled form fields

I tried detecting this via change events which didn’t work. I also tried checking for value on init but that only worked for non-password inputs and was non-deterministic in terms of its timing.

Possible workarounds:

Style for :autofill

This is clearly the most elegant solution, but looks like it’s Chrome only

Have elements poll to check if they’re auto-filled

This will lead to the highest design fidelity, but is extremely inefficient and will incur a significant performance impact, especially on mobile browsers.

Tell users to set autocomplete="off"

This would in theory solve the problem. However, it is not only an inconvenience to the user, but it’s not guaranteed to work correctly for all types of input.

Tell users to only use JS-enhanced single-line inputs with form fields that won’t be auto-completed

😢

Copied from https://github.com/google/material-design-lite/issues/4827

---

• Summarize research on how most browsers handle auto-filling and present best solution
• Implement solution

[ranjeet-choudhary]

@amsheehan is this fixed? i’m still getting this issue with autocomplete data

[amsheehan]

@traviskaufman After looking at the responses from the implementors of Firefox and Chrome regarding the issue of input elements not firing events for programmatic assignments of values, I don’t think we should necessarily try to force this. They seem content that since the behavior is not in the standard, that inputs should not behave this way.