1767228 - Consider adding showPicker support for datalist

Status: RESOLVED FIXED

(Core :: DOM: Forms, enhancement)

Comment 1

[Luke Warlow]

This would be a nice addition for consistency with Chrome.

https://bugs.webkit.org/show_bug.cgi?id=261701 is the corresponding WebKit bug.

Comment 2

[Tom S. (please needinfo tschuster)]

Attachment: WIP: Bug 1767228 - Add showPicker support for input with datalist

Comment 3

[Tom S. (please needinfo tschuster)]

This is actually not that hard to implement when we explicitly focus the input element and rely on the autocomplete code working correctly.
Emilio, do you think this approach is reasonable? Is it a problem to depend on toolkit code like this from dom?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

I don't think so, we depend on toolkit code for other stuff like the select popup etc, right? I think as long as it's properly tested it should be fine.

Comment 5

[me]

This feature is now available in Safari Technology Preview.

Comment 6

[Vincent Hilla [:vhilla]]

Attachment: Bug 1767228 - Add showPicker Support for Input with Data List. r=emilio,evilpie

Comment 7

[Vincent Hilla [:vhilla]]

Attachment: Bug 1767228 - Refactor: Rename nsFormFillController focusedElement to controlledElement. r=emilio

Comment 8

[Sebastian Zartner [:sebo]]

This change needs to be documented.

Sebastian

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/427097407647
https://hg.mozilla.org/integration/autoland/rev/1a86397216dd
Refactor: Rename nsFormFillController focusedElement to controlledElement. r=emilio,credential-management-reviewers,dimi
https://github.com/mozilla-firefox/firefox/commit/5d7a4cf9ed9c
https://hg.mozilla.org/integration/autoland/rev/ca9a6a432534
Add showPicker Support for Input with Data List. r=emilio,credential-management-reviewers,dimi

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/55666 for changes under testing/web-platform/tests

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/7327b348bc17
https://hg.mozilla.org/integration/autoland/rev/2c8928091c7a
Revert "Bug 1767228 - Add showPicker Support for Input with Data List. r=emilio,credential-management-reviewers,dimi" for causing mochitest failures in test_input_text_show_picker.html

Comment 12

[Cristian Tuns]

Backed out for causing mochitest failures

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | dom/html/test/forms/test_input_text_show_picker.html | Test timed out. -

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 14

[Vincent Hilla [:vhilla]]

Ah, showPicker is disallowed in xorigin: https://searchfox.org/firefox-main/rev/da0861d6f7f7280518d2a4511d07401aecf50afa/dom/html/HTMLInputElement.cpp#5866-5869

I updated the test and rebased: https://treeherder.mozilla.org/jobs?repo=try&revision=40da0adbd384a5d07b9ae610f88eccc04253c7f7

Comment 15

[buovjaga]

Vincent: nice to see datalist get some love! Are there plans to work on bug 1535985 and bug 1882075 as well? Relevant writeup: https://adrianroselli.com/2023/06/under-engineered-comboboxen.html

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/dee40b711de1
https://hg.mozilla.org/integration/autoland/rev/f7b576871069
Refactor: Rename nsFormFillController focusedElement to controlledElement. r=emilio,credential-management-reviewers,dimi
https://github.com/mozilla-firefox/firefox/commit/818d00dba473
https://hg.mozilla.org/integration/autoland/rev/2b2169b52d07
Add showPicker Support for Input with Data List. r=emilio,credential-management-reviewers,dimi

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/55714 for changes under testing/web-platform/tests

Comment 18

[amarc]

https://hg.mozilla.org/mozilla-central/rev/f7b576871069
https://hg.mozilla.org/mozilla-central/rev/2b2169b52d07

Comment 19

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 20

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 21

[Vincent Hilla [:vhilla]]

(In reply to buovjaga from comment #15)

Vincent: nice to see datalist get some love! Are there plans to work on bug 1535985 and bug 1882075 as well? Relevant writeup: https://adrianroselli.com/2023/06/under-engineered-comboboxen.html

I'm not planning to as they are unfortunately outside my area. Please ask on those bugs if you would like to know.

Comment 22

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Hi Vincent, can you please nominate it for a release note? :)

Comment 23

[Vincent Hilla [:vhilla]]

Thanks for the reminder :)

Release Note Request
[Why is this notable]: Expansion of a HTML/DOM feature
[Affects Firefox for Android]: No, because of Bug 1535985
[Suggested wording]: showPicker() now supports text-based <input> elements with an associated <datalist>, displaying the autofill dropdown.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#showpicker_for_a_datalist_input

Comment 24

[Dianna Smith [:diannaS]]

Added to 146 nightly release notes
https://www.firefox.com/firefox/146.0a1/releasenotes/

Comment 25

[James Teh [:Jamie]]

How is this intended to be used? If I do this:

data:text/html,<input id="inp" list="dl"><datalist id="dl"><option>a</option><option>b</option></datalist><button onclick="inp.showPicker();">Show

Pressing Show pops up the list. However:

1. You can't select an item with the keyboard, nor can you dismiss the list with escape.
2. Nothing is reported to accessibility APIs, so a screen reader user won't even be aware that the list has appeared unless they explicitly go looking for it in the accessibility tree.

IMO, this is a ship blocker as far as accessibility is concerned. However, I'll hold off on filing a bug in case I'm misunderstanding how this is meant to be used.

Comment 26

[buovjaga]

(In reply to James Teh [:Jamie] from comment #25)

How is this intended to be used? If I do this:

data:text/html,<input id="inp" list="dl"><datalist id="dl"><option>a</option><option>b</option></datalist><button onclick="inp.showPicker();">Show

Pressing Show pops up the list. However:

1. You can't select an item with the keyboard, nor can you dismiss the list with escape.
2. Nothing is reported to accessibility APIs, so a screen reader user won't even be aware that the list has appeared unless they explicitly go looking for it in the accessibility tree.

IMO, this is a ship blocker as far as accessibility is concerned. However, I'll hold off on filing a bug in case I'm misunderstanding how this is meant to be used.

This is how I intend to use it: https://stackoverflow.com/a/79807118/3057764 as workaround for bug 1882075.

Chromium switches focus to the list in your example. Also, bug 665728 prevents further programmatic workarounds to the issue you pointed out, because we can't have a chain like this: showPicker() triggered outside the input element, followed by focus() and another showPicker() triggered by the focus event. Attempting this leads to "Uncaught DOMException: HTMLInputElement.showPicker: Call was blocked due to lack of user activation."

Comment 27

[Edgar Chen [:edgar]]

Note that we’ve decided to hold off on shipping this to the release channel due to accessibility concerns. It will only be enabled in early beta for now (bug 1998670), and bug 1998668 is filed to track shipping to the release channel.

Comment 28

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Edgar Chen [:edgar] from comment #27)

Note that we’ve decided to hold off on shipping this to the release channel due to accessibility concerns. It will only be enabled in early beta for now (bug 1998670), and bug 1998668 is filed to track shipping to the release channel.

Hi Dianna, simply to ensure you're aware of this. I changed the firefox-status-146 to disabled to reflect this. I don't know what to do with the releasenote flag - I'll leave it to you. Thanks.

Comment 29

[Dianna Smith [:diannaS]]

Added the release notes for nightly only with bug 1998670 and added the release note request for bug 1998668 for when it lands.
Ill remove the flag from here. thank you for the heads up!