Skip to content
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.

Sign up for GitHub

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 <select> elements #9754

Merged
merged 9 commits into from
Nov 16, 2023
+38 −7
Merged

Add showPicker to <select> elements #9754

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2e5b8a2
Add showPicker to <select> elements
lukewarlow Sep 19, 2023
342dee6
Combine showPicker algorithms
lukewarlow Sep 19, 2023
9e56118
Mention element focus
lukewarlow Oct 9, 2023
774c98c
Remove focus mention and address nits
lukewarlow Oct 10, 2023
c36752e
Add line to say picker interface must be focused.
lukewarlow Oct 11, 2023
8a7786a
Remove line that says picker interface must be focused.
lukewarlow Oct 16, 2023
5c237e5
Add check that select element is being rendered to showPicker algorithm
lukewarlow Nov 7, 2023
daf2c1e
Swap NotAllowedError for NotSupportedError
lukewarlow Nov 7, 2023
953c3fe
Address review comments
lukewarlow Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52223,8 +52223,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>

<hr>

<p>The <dfn method for="HTMLInputElement"><code
data-x="dom-input-showPicker">showPicker()</code></dfn> method steps are:</p>
<p>The <code>HTMLInputElement</code> <dfn method for="HTMLInputElement"><code
data-x="dom-input-showPicker">showPicker()</code></dfn> and <code>HTMLSelectElement</code> <dfn
method for="HTMLSelectElement"><code data-x="dom-select-showPicker">showPicker()</code></dfn>
lukewarlow marked this conversation as resolved.
Show resolved Hide resolved
method steps are:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the syntax we've been using here, when we need to disambiguate between different base classes, is "The HTMLInputElement showPicker() method steps and the HTMLSelectElement showPicker() method steps".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hopefully this is addressed properly let me know if I've misunderstood.


<ol>
<li><p>If <span>this</span> is not <span data-x="concept-fe-mutable">mutable</span>, then throw
Expand All @@ -52234,6 +52236,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<p>If <span>this</span>'s <span>relevant settings object</span>'s <span
data-x="concept-settings-object-origin">origin</span> is not <span>same origin</span> with
<span>this</span>'s <span>relevant settings object</span>'s <span>top-level origin</span>, and
<span>this</span> is a <code>select</code> element, or
<span>this</span>'s <code data-x="attr-input-type">type</code> attribute is not in the <span
data-x="attr-input-type-file">File Upload</span> state or <span
data-x="attr-input-type-color">Color</span> state, then throw a
Expand All @@ -52249,11 +52252,15 @@ You cannot submit this form when the field is incorrect.</samp></pre>
activation</span>, then throw a <span>"<code>NotAllowedError</code>"</span>
<code>DOMException</code>.</p></li>

<li><p>If <span>this</span> is a <code>select</code> element, and <span>this</span> is not
<span>being rendered</span>, then throw a <span>"<code>NotSupportedError</code>"</span>
<code>DOMException</code>.<p></li>
lukewarlow marked this conversation as resolved.
Show resolved Hide resolved

<li><p><span>Show the picker, if applicable</span>, for <span>this</span>.</p></li>
</ol>

<p>To <dfn>show the picker, if applicable</dfn> for an <code>input</code> element
<var>element</var>:</p>
<p>To <dfn>show the picker, if applicable</dfn> for an <code>input</code> or <code>select</code>
element <var>element</var>:</p>

<ol>
<li><p>If <var>element</var>'s <span>relevant global object</span> does not have <span>transient
Expand All @@ -52263,7 +52270,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
return.</p></li>

<li>
<p>If <var>element</var>'s <code data-x="attr-input-type">type</code> attribute is in the <span
<p>If <var>element</var> is an <code>input</code> element and <var>element</var>'s <code
data-x="attr-input-type">type</code> attribute is in the <span
data-x="attr-input-type-file">File Upload</span> state, then run these steps <span>in
parallel</span>:</p>

Expand Down Expand Up @@ -52328,11 +52336,13 @@ You cannot submit this form when the field is incorrect.</samp></pre>
data-x="attr-input-type-color">Color</span> states;</p></li>

<li><p><code>input</code> elements in various states that have a <span
data-x="concept-input-list">suggestions source element</span>; and</p></li>
data-x="concept-input-list">suggestions source element</span>;</p></li>

lukewarlow marked this conversation as resolved.
Show resolved Hide resolved
<li><p><code>input</code> elements whose <code data-x="attr-input-type">type</code> attribute
is in the <span data-x="attr-input-type-file">File Upload</span> state (although those are
handled via the special case above, instead of by this step).</p></li>
handled via the special case above, instead of by this step); and</p></li>

<li><p><code>select</code> elements.</p></li>
</ul>

<p>However, the intent of this step is to trigger <em>any</em> picker UI implementation. So
Expand Down Expand Up @@ -52758,6 +52768,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
boolean <span data-x="dom-cva-reportValidity">reportValidity</span>();
undefined <span data-x="dom-cva-setCustomValidity">setCustomValidity</span>(DOMString error);

undefined <span data-x="dom-select-showPicker">showPicker</span>();

readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
};</code></pre>
</dd>
Expand Down Expand Up @@ -53085,6 +53097,24 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {

<p>Can be set, to change the selection.</p>
</dd>

<dt><code data-x=""><var>select</var>.<span subdfn data-x="dom-select-showPicker">showPicker</span>()</code></dt>

<dd>
<p>Shows any applicable picker UI for <var>select</var>, so that the user can select a value.

<p>Throws an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code> if
<var>select</var> is not <span data-x="concept-fe-mutable">mutable</span>.</p>

<p>Throws a <span>"<code>NotAllowedError</code>"</span> <code>DOMException</code> if called
without <span data-x="transient activation">transient user activation</span>.</p>

<p>Throws a <span>"<code>SecurityError</code>"</span> <code>DOMException</code> if
<var>select</var> is inside a cross-origin <code>iframe</code>.</p>
lukewarlow marked this conversation as resolved.
Show resolved Hide resolved

<p>Throws a <span>"<code>NotSupportedError</code>"</span> <code>DOMException</code> if
<var>select</var> is not <span>being rendered</span>.</p>
</dd>
</dl>

<div w-nodev>
Expand Down Expand Up @@ -139684,6 +139714,7 @@ INSERT INTERFACES HERE
Lucas Gadani,
&#x0141;ukasz Pilorz,
Luke Kenneth Casson Leighton,
Luke Warlow,
Luke Wilde,
Maciej Stachowiak,
Magne Andersson,
Expand Down