Add showPicker() to <input> elements

[domenic]

Also specifies that both color and file inputs show pickers on both programmatic and user clicks, since that is true in all browsers. (Previously the spec included this behavior only for file inputs.)

Closes #6909. Closes #3232.

---

Mini-explainer for TAG review / blink-dev purposes:

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

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

In particular, in today's browsers we expect it to show pickers for: date, month, week, time, datetime-local, color, and file. However, the specification is written to be agnostic to specific browser UI choices; so for example, if a browser decided that email inputs should have a contact picker interface, then the spec requests that input.showPicker() open that picker.

This functionality can sometimes be accomplished today with element.click(). See this comment for full details, but a general summary is that click() almost always opens pickers for color and file, and on Chrome mobile and Safari desktop it opens all the other (implemented) pickers as well.

Part of the motivation for this change is to allow Chrome to eventually remove this behavior for other pickers, and achieve interop with other browsers. However, we (Chrome) would be more comfortable doing that when we had a solid alternative to evangelize in place of click(). Thus, showPicker().

showPicker() is specified with a few restrictions to improve security:

• It can only be called with transient user activation. If called without, it will throw a "NotAllowedError" DOMException. (This is similar to how click() behaviors, except click() silently does nothing.)

• It can only be called in same-origin iframes. If called in a cross-origin iframe, it will throw a "SecurityError" DOMException.

  • However, we made an exception to allow it even in cross-origin iframes for file and color inputs, since click() can be called in cross-origin iframes and trigger pickers today for file and color in all browsers. We think limiting showPicker() in these cases would just steer people toward the less-predictable click(), which is subpar.

  • We're interested in removing this exception (for both click() and showPicker()) over time, but it's likely a tricky deprecation process across all browsers. E.g., we suspect there are a lot of cross-origin widgets that do file uploads. So we will leave that as a separate project.

Future work:

• We may want to add a similar showPicker() to the <select> element in the future, if developers ask for it.
• It's possible closePicker() might be useful, and we could consider adding that if developers ask for it.
• We could add a permissions policy which allows cross-origin iframes to show pickers, when their parent chain allows them to do so.

• At least two implementers are interested (and none opposed):
  • Chromium
  • Gecko
• Tests are written and can be reviewed and commented upon at:
  • https://github.com/web-platform-tests/wpt/blob/master/html/semantics/forms/the-input-element/show-picker.tentative.html tests user activation requirement
  • https://github.com/web-platform-tests/wpt/blob/master/html/semantics/forms/the-input-element/show-picker-cross-origin-iframe.tentative.html tests cross-origin iframe checks
  • Actually showing the picker is not testable in WPT
• Implementation bugs are filed:
  • Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=939561
  • Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1745005
  • Safari: https://bugs.webkit.org/show_bug.cgi?id=234009

(See WHATWG Working Mode: Changes for more details.)

---

/input.html ( diff )

[DanielHerr]

Although text based input usually does not have anything like a picker, it does have a list of suggestions if it has a datalist. showPicker() seems like a natural fit for showing the suggestions as well.
Though I assume that since expanding to select may be delayed, that datalist may be also.

[annevk]

This looks nice! Maybe @emilio and @sefeng211 also want to take a peek.

[beaufortfrancois]

@domenic What are the next steps?

[domenic]

I think this is pretty much ready to merge. @annevk can you confirm Mozilla is interested? Should we file a standards-positions issue?

[annevk]

Yes, and no need for standards-positions from our side.

[beaufortfrancois]

@annevk Is there an implementation bug filed for this already in Mozilla bug tracker?

[annevk]

No, please file one. And one for Safari too. https://github.com/whatwg/meta/blob/main/MAINTAINERS.md has pointers.

[beaufortfrancois]

• https://bugzilla.mozilla.org/show_bug.cgi?id=1745005
• https://bugs.webkit.org/show_bug.cgi?id=234009

[beaufortfrancois]

FYI https://github.com/web-platform-tests/wpt/blob/master/html/semantics/forms/the-input-element/show-picker-cross-origin-iframe.html and https://github.com/web-platform-tests/wpt/blob/master/html/semantics/forms/the-input-element/show-picker.html test names have been renamed ("tentative" has been removed) in web-platform-tests/wpt#32031