1745005 - Add showPicker() to <input> elements

Status: RESOLVED FIXED

(Core :: DOM: Forms, enhancement)

Description

[beaufort.francois]

Steps to reproduce:

The showPicker() method is a new addition to HTMLInputElement which addresses a very common request from web developers: programmatically showing a picker for controls like date etc.

<input id="dateInput" type="date">
<button onclick="dateInput.showPicker()">Show the date picker</button>

WHATWG Spec PR: https://github.com/whatwg/html/pull/7319

Comment 1

[beaufort.francois]

I've added MDN doc for this feature at https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
See https://github.com/mdn/content/commits/main/files/en-us/web/api/htmlinputelement/showpicker/index.md

Comment 2

[Philip Jägenstedt [:foolip]]

This has been fixed in WebKit now: https://bugs.webkit.org/show_bug.cgi?id=237192

Comment 3

[beaufort.francois]

Note that WebKit patch does not cover date pickers yet. Only file and color from what I've seen.
See https://twitter.com/quicksave2k/status/1508382939834470410

Comment 4

[Tom Schuster (MoCo)]

Attachment: Bug 1745005 - Add showPicker() to <input> elements. r?emilio

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fa6795d107b1
Add showPicker() to <input> elements. r=emilio

Comment 6

[Cristina Cozmuta (:CrissCozmuta)]

Backed out for causing multiple failures. CLOSED TREE

Backout link: https://hg.mozilla.org/integration/autoland/rev/c99a0223fbd3bc7140c79e3d182415831093ccff

Push with failures : https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Crunnable&revision=fa6795d107b10fdd812be351f426522b28a4f363&selectedTaskRun=OARZJowNS6emhue1-nIq9g.0

Link failure logs:
https://treeherder.mozilla.org/logviewer?job_id=374318488&repo=autoland&lineNumber=5110
https://treeherder.mozilla.org/logviewer?job_id=374323849&repo=autoland&lineNumber=23379
https://treeherder.mozilla.org/logviewer?job_id=374321347&repo=autoland&lineNumber=6600

Comment 8

[Tom S [:evilpie]]

https://treeherder.mozilla.org/logviewer?job_id=374318488&repo=autoland&lineNumber=5110

We seem to have some sort of mutex unlocking problem in the GTK code for the file picker. But this could also be some sort of problem with how tsan and GTK interact. I rather suspect we just have to disable the test in that case.

https://treeherder.mozilla.org/logviewer?job_id=374323849&repo=autoland&lineNumber=23379

Not really sure about this, but this leak seems to be related to stencil maybe?

https://treeherder.mozilla.org/logviewer?job_id=374321347&repo=autoland&lineNumber=6600

Running the test under verify mode exposes an already existing problem. The test failure is unrelated to showPicker.

Comment 9

[Tom S [:evilpie]]

The leaks in this try push might be caused by the opened file pickers. Apparently wpt actually uses platform native pickers even when testing. Do we have some way of closing or suppressing these pickers in wpt/test-driver?

Comment 10

[James Graham [:jgraham]]

It's not fully clear to me how this is expected to interact with WebDriver in general. Usually for webapp testing the WebDriver API is to "send_keys" a path to a file input and have that become the uploaded path for that control. In this case, for standard WebDriver, it seems like we'd need to have some other way to specify how the automation should respond to the file picker? For WebDriver-BiDi one could obviously emit an event and allow a response.

Anyway, there's currently no support for this in WebDriver / testdriver / etc. It seems to me that we probably want to be setting some pref that disables the native control: what are we doing for other test harnesses, or are we not testing this outside wpt?

Comment 11

[Tom S [:evilpie]]

Other tests override the platform native file picker using SpecialPowers.MockFilePicker.

Comment 12

[James Graham [:jgraham]]

Ah, so that's providing a full mock API. We could add something like that to the TestUtils spec (or to HTML!), but my impression is that this is going to be a thing that developers want and so should end up in WebDriver-BiDi. But that isn't a short term solution.

I'm not sure what the best course of action is in the short term. If it's "just" leaks, we could annotate the leaks as expected in the wpt metadata. If we're not actually managing to test the API correctly, we could also copy the tests into the gecko-specific wpt directory; tests in that directory have access to SpecialPowers so we could make our copy use the mock API to ensure we're not missing coverage in the short term (of course we may end up with missing coverage if the upstream tests are updated, so this isn't an ideal solution).

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/efc1760055de
Add showPicker() to <input> elements. r=emilio

Comment 14

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

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

Comment 15

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

Upstream PR merged by moz-wptsync-bot

Comment 16

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/efc1760055de

Comment 17

[Hamish Willee]

Docs work in MDN:content:15591 adds some additional examples which you can see here.

This seems to indicate that of the "normally supported types" in the spec:

• Firefox supports input types: color, date, datetime-local, file
• Firefox does not support types: month, week, time and also does not support datalist or autocomplete options.

Is that correct?

FYI other FF101 docs for this can be tracked in https://github.com/mdn/content/issues/15407#issuecomment-1110308404. Most of the work has been done in https://github.com/mdn/content/pull/15591

Comment 18

[Tom S [:evilpie]]

Yes sounds correct.

Comment 19

[Hamish Willee]

Thanks @Tom. I've added https://github.com/mdn/browser-compat-data/pull/16101 to capture that.