input with name or label matching an autofill heuristic cannot use dynamic <datalist>
Categories
(Toolkit :: Form Autofill, defect, P3)
Tracking
()
People
(Reporter: hiebj, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/118.0
Steps to reproduce:
You can see an example of the broken setup here:
https://codesandbox.io/s/romantic-voice-7vy2ls
On a blank page, create 3 or more (!) datalist-enabled inputs which have names or labels that match the autofill heuristic regexes. The suggestions in the <datalist> should be dynamically updated as the user types.
In my example, only the first datalist is wired up, to keep things simple.
I do not know why you must have at least three inputs, but that certainly appears to be the case; possibly autofill is only enabled for forms with at least 3 inputs?
You can experiment with the codesandbox to see that removing an input so that there are only 2 restores normal function. Adding additional inputs continues to result in a broken form.
I based my regex testing on the file here:
You can try changing the names and labels to metasyntactic variables (foo, bar) and function is restored:
https://codesandbox.io/s/elegant-wildflower-27lqnj
Actual results:
As the user types, no suggestions are shown. Pressing backspace will restore the suggestions, similar to this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1474137
Incidentally, pressing ESC then the ArrowDown will also reset the suggestion state, and pop up the suggestion list.
At first I thought it was a regression of 1474137, until I had to jump through so many hoops to reproduce it.
Expected results:
Suggestions should be shown and updated as the user types. Ideally, my suggestions should be merged with the browser's autofill suggestions, and the user should be presented with both - which is how it works when the suggestions are static, and do not change as the user types.
The only workarounds I have found are to change the name and text content of the associated <label> to something that does not match the heuristic, or by breaking the <label for> association.
This is especially annoying with the label text, since it is user-facing; it appears I must either break accessibility by removing the label association or I must re-label my input with something awkward, like "Line 1" (the regexes used to match are very aggressive). I have not yet tried unicode-hacking the labels by using characters that look like English letters but are not, but obviously this is not preferable either, as it will be unpronounceable by a screen reader.
Further testing has shown that it does not matter if the other inputs also have a <datalist>. Only the one input which is being used needs one to reproduce the issue.
This bug appears to affect any <datalist> attached to a heuristic-matching <input> on a page containing 3 or more inputs of any type.
Disabling autofill with <input autocomplete="off"> disables the related <datalist> completely if the input matches an autofill heuristic. Setting an appropriate autofill hint according to the spec (such as address-line1) has no effect.
If there are any workarounds that do not involve re-labeling inputs I would love to know about them.
|
||
Comment 4•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Toolkit::Form Autofill' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 5•2 years ago
|
||
The severity field is not set for this bug.
:serg, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Updated•2 years ago
|
|
|
||
Comment 6•2 years ago
|
||
Thanks for filing this report! This looks very much like Bug 1823512.
Description
•