-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add showPicker() to <input> elements #7319
Conversation
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks nice! Maybe @emilio and @sefeng211 also want to take a peek.
This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561
This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3310677 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Fr <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/main@{#948890}
This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3310677 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Fr <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/main@{#948890}
This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3310677 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Fr <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/main@{#948890}
@domenic What are the next steps? |
I think this is pretty much ready to merge. @annevk can you confirm Mozilla is interested? Should we file a standards-positions issue? |
Yes, and no need for standards-positions from our side. |
@annevk Is there an implementation bug filed for this already in Mozilla bug tracker? |
No, please file one. And one for Safari too. https://github.com/whatwg/meta/blob/main/MAINTAINERS.md has pointers. |
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 |
…s-origin iframe check, a=testonly Automatic update from web-platform-tests Use IsSameOriginWith for showPicker cross-origin iframe check This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3310677 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Fr <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/main@{#948890} -- wpt-commits: e6c8eb0800388d8e1e49f46f3454d456a0d7e301 wpt-pr: 31908
This CL changes from IsSameOriginDomainWith to IsSameOriginWith the check for cross-origin iframes when showPicker() is called following spec change[1]. [1] whatwg/html#7319 (comment) Change-Id: Ic21ec96e241cad730d6e93a7b635cf9107f48023 Bug: 939561 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3310677 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Fr <beaufort.francois@gmail.com> Cr-Commit-Position: refs/heads/main@{#948890} NOKEYCHECK=True GitOrigin-RevId: 8dc7d718d531bbd57146ea1b7e00ebece1885ace
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 toHTMLInputElement
which addresses a very common request from web developers: programmatically showing a picker for controls like date etc. Sample code: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 thatclick()
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 howclick()
behaviors, exceptclick()
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 limitingshowPicker()
in these cases would just steer people toward the less-predictableclick()
, which is subpar.We're interested in removing this exception (for both
click()
andshowPicker()
) 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:
showPicker()
to the<select>
element in the future, if developers ask for it.closePicker()
might be useful, and we could consider adding that if developers ask for it.(See WHATWG Working Mode: Changes for more details.)
/input.html ( diff )