From e60fc35755c2f8e6c38d3823999b518be6a6a9e8 Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Thu, 16 Nov 2023 11:59:41 +0000
Subject: [PATCH] Add showPicker() to <select> elements

Closes #7957.
---
 source | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/source b/source
index b7d731bcacb..5ce64fef4c4 100644
--- a/source
+++ b/source
@@ -52397,8 +52397,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>
+  method steps are:</p>
 
   <ol>
    <li><p>If <span>this</span> is not <span data-x="concept-fe-mutable">mutable</span>, then throw
@@ -52408,6 +52410,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
@@ -52423,11 +52426,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>
+
    <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
@@ -52437,7 +52444,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>
 
@@ -52502,11 +52510,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>
 
       <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
@@ -52932,6 +52942,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>
@@ -53259,6 +53271,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>
+
+    <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>
@@ -141053,6 +141083,7 @@ INSERT INTERFACES HERE
   Lucas Gadani,
   &#x0141;ukasz Pilorz,
   Luke Kenneth Casson Leighton,
+  Luke Warlow,
   Luke Wilde,
   Maciej Stachowiak,
   Magne Andersson,