From c3b0c506c0f703a41f71686fc1ab16f68ecb2593 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Mon, 8 Nov 2021 15:10:06 -0500 Subject: [PATCH 1/4] Add showPicker() to elements 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. --- source | 178 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 141 insertions(+), 37 deletions(-) diff --git a/source b/source index 706ee746957..b0beef00fd2 100644 --- a/source +++ b/source @@ -44110,6 +44110,8 @@ interface HTMLInputElement : HTMLElement { undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve"); undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction); + undefined showPicker(); + // also has obsolete members }; @@ -45438,6 +45440,15 @@ interface HTMLInputElement : HTMLElement { otherwise.

+

Recall that an element's activation behavior runs for both + user-initiated activations and for synthetic activations (e.g., via el.click()). User agents might also have behaviors for a given control — not + specified here — that are triggered only by true user-initiated activations. A common choice is to + show the picker, if applicable, for the control. In contrast, the input + activation behavior only shows pickers for the special historical cases of the File Upload and Color states.

+

The legacy-pre-activation behavior for input elements are these steps:

@@ -47663,6 +47674,15 @@ ldh-str = < as defined in value to the empty string.

+

The input activation behavior for such an element element is:

+ +
    +

  1. If element's relevant global object does not have transient + activation, then return.

    2. + +

  2. Show the picker, if applicable, for element.

    3. +
+

Constraint validation: While the user interface describes input that the user agent cannot convert to a valid lowercase simple color, the control is suffering from bad input.

@@ -48064,44 +48084,10 @@ ldh-str = < as defined in multiple attribute is not set on element, there - must be no more than one file selected; otherwise, any number may be selected. Files can be - from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the - user's device.

- -

  • Wait for the user to have made their selection.

    • - -

  • If the user dismissed the prompt without changing their selection, then queue an - element task on the user interaction task source given element - to fire an event named cancel at element, with the bubbles attribute initialized to true.

    • +

  • If element's relevant global object does not have transient + activation, then return.

    • -

  • Otherwise, update the file selection for element.

    • - - -

    As with all user interface specifications, user agents have a good deal of - freedom in how they interpret these requirements. The above text implies that a user either - dismisses the prompt or changes their selection; exactly one of these will be true. But the - mapping of these possibilities to specific user interface elements is not mandated by the - standard. For example, a user agent might interpret clicking the "Cancel" button when files were - previously selected as a change of selection to select zero files, thus firing input and change. Or it might - interpret such a click as a dismissal that leaves the selection unchanged, thus firing cancel. Similarly, it's up to the user agent whether re-selecting - the same files counts as were previously selected counts as a dismissal, or as a change of - selection.

    - +

  • Show the picker, if applicable, for element.

    • If the element is mutable, the user agent should allow the @@ -49856,6 +49842,20 @@ You cannot submit this form when the field is incorrect.

    Returns the datalist element indicated by the list attribute.

    + +
    input.showPicker()
    + +
    +

    Shows any applicable picker UI for input, so that the user can select a value. (If + no picker UI is implemented for the given control, then this method does nothing.)

    + +

    Throws a "NotAllowedError" DOMException if called + without transient user activation.

    + +

    Throws a "SecurityError" DOMException if + input is inside a cross-origin iframe, unless input is in the + File Upload or Color states.

    @@ -50124,6 +50124,110 @@ You cannot submit this form when the field is incorrect. attribute must return the current suggestions source element, if any, or null otherwise.

    +
    + +

    The showPicker() method steps are:

    + +
      +

    1. If this's relevant global object does not have transient + activation, then throw a "NotAllowedError" + DOMException.

      2. + +
    2. +

      If this's relevant settings object's origin is not same origin-domain + with this's relevant settings object's top-level origin, + and this's type attribute is not in the + File Upload state or Color state, then throw a + "SecurityError" DOMException.

      + +

      File and Color inputs are exempted from this check for historical + reason: their input activation behavior also shows their pickers, and has never + been guarded by an origin check.

      +
      3. + +

    3. Show the picker, if applicable, for this.

      4. +
    + +

    To show the picker, if applicable for an input element + element:

    + +
      +

    1. Assert: element's relevant global object has transient + activation.

      2. + +

    2. If element is not mutable, then + return.

      3. + +
    3. +

      If element's type attribute is in the File Upload state, then run these steps in + parallel:

      + +
        +

      1. Optionally, wait until any prior execution of this algorithm has terminated.

        2. + +

      2. Display a prompt to the user requesting that the user specify some files. If the multiple attribute is not set on element, there + must be no more than one file selected; otherwise, any number may be selected. Files can be + from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the + user's device.

        3. + +

      3. Wait for the user to have made their selection.

        4. + +

      4. If the user dismissed the prompt without changing their selection, then queue an + element task on the user interaction task source given element + to fire an event named cancel at element, with the bubbles attribute initialized to true.

        5. + +

      5. Otherwise, update the file selection for element.

        6. +
      + +

      As with all user interface specifications, user agents have a good deal of + freedom in how they interpret these requirements. The above text implies that a user either + dismisses the prompt or changes their selection; exactly one of these will be true. But the + mapping of these possibilities to specific user interface elements is not mandated by the + standard. For example, a user agent might interpret clicking the "Cancel" button when files were + previously selected as a change of selection to select zero files, thus firing input and change. Or it might + interpret such a click as a dismissal that leaves the selection unchanged, thus firing cancel. Similarly, it's up to the user agent whether re-selecting + the same files counts as were previously selected counts as a dismissal, or as a change of + selection.

      +
      4. + +
    4. +

      Otherwise, the user agent should show any relevant user interface for selecting a value for + element, in the way it normally would when the user interacts with the control. (If + no such UI applies to element, then this step does nothing.)

      + +

      If such a user interface is shown, it must respect the requirements stated in the relevant + parts of the specification for how element behaves given its type attribute state. (For example, various sections describe + restrictions on the resulting value string.)

      + +

      This step can have user-visible (but not script-visible) side effects, such as closing other + pickers that were previously shown by this algorithm.

      + +

      As of the time of this writing, typical browser implementations show such + picker UI for input elements whose type + attributes are in the Date, Month, Week, + Time, Local Date and Time, and Color states. (In addition to the special File Upload case specified above.) However, the intent of + this step is to trigger any picker UI implementation. So for example, if a user agent + implemented a password picker UI for the Password state, then this method would be expected to + show that picker UI when called on a password input.

      +
      5. +
    +
    From 1cdc32839d671c438ca7c7ae89446a21cfff951c Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Wed, 10 Nov 2021 16:21:46 -0500 Subject: [PATCH 2/4] Review comments --- source | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/source b/source index b0beef00fd2..b5c6eaa93b5 100644 --- a/source +++ b/source @@ -50130,10 +50130,6 @@ You cannot submit this form when the field is incorrect. data-x="dom-input-showPicker">showPicker() method steps are:

      -

    1. If this's relevant global object does not have transient - activation, then throw a "NotAllowedError" - DOMException.

      2. -

    2. If this's relevant settings object's origin is not same origin-domain @@ -50149,6 +50145,10 @@ You cannot submit this form when the field is incorrect. been guarded by an origin check.

      3. +

    3. If this's relevant global object does not have transient + activation, then throw a "NotAllowedError" + DOMException.

      4. +

    4. Show the picker, if applicable, for this.

    @@ -50210,8 +50210,11 @@ You cannot submit this form when the field is incorrect. data-x="attr-input-type">type attribute state. (For example, various sections describe restrictions on the resulting value string.)

    -

    This step can have user-visible (but not script-visible) side effects, such as closing other - pickers that were previously shown by this algorithm.

    +

    This step can have side effects, such as closing other pickers that were previously shown by + this algorithm. (If this closes a file selection picker, then per the above that will lead to + firing either input and change events, or a cancel + event.)

    As of the time of this writing, typical browser implementations show such picker UI for input elements whose type From e8a4140394d94f013cf0fad5b8ee737c2af8b0b0 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Mon, 29 Nov 2021 15:31:47 -0500 Subject: [PATCH 3/4] Mention datalists as possible pickers --- source | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/source b/source index b5c6eaa93b5..c969e451f63 100644 --- a/source +++ b/source @@ -50216,18 +50216,30 @@ You cannot submit this form when the field is incorrect. data-x="event-change">change events, or a cancel event.)

    -

    As of the time of this writing, typical browser implementations show such - picker UI for input elements whose type - attributes are in the Date, Month, Week, - Time, Local Date and Time, and Color states. (In addition to the special File Upload case specified above.) However, the intent of - this step is to trigger any picker UI implementation. So for example, if a user agent - implemented a password picker UI for the Password state, then this method would be expected to - show that picker UI when called on a password input.

    +
    +

    As of the time of this writing, typical browser implementations show such picker UI for:

    + +
      +

    • input elements whose type + attributes are in the Date, Month, Week, + Time, Local Date and Time, and Color states;

      • + +

    • input elements in various states that have a suggestions source element; and

      • + +

    • input elements whose type attribute + is in the File Upload state (although those are + handled via the special case above, instead of by this step).

      • +
    + +

    However, the intent of this step is to trigger any picker UI implementation. So + for example, if a user agent implemented a password picker UI for the Password state, then this method would be expected to + show that picker UI when called on a password input.

    +
    From 99a4d5e472257abe295136a2ad80e3f9cee87b59 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Tue, 30 Nov 2021 15:27:53 -0500 Subject: [PATCH 4/4] Same-origin --- source | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source b/source index c969e451f63..0011298c6f2 100644 --- a/source +++ b/source @@ -50132,10 +50132,10 @@ You cannot submit this form when the field is incorrect.

    1. If this's relevant settings object's origin is not same origin-domain - with this's relevant settings object's top-level origin, - and this's type attribute is not in the - File Upload state or origin is not same origin with + this's relevant settings object's top-level origin, and + this's type attribute is not in the File Upload state or Color state, then throw a "SecurityError" DOMException.