Make <select> <button>s have opening behavior by default

This patch makes <button>s in <select> with appearance:base-select have the behavior which opens the listbox by default without the need for type=popover. If there are multiple buttons and any of them have type=popover, then only those one(s) will have the opening behavior. This was resolved in openui here: openui/open-ui#939 (comment) Bug: 40146374 Change-Id: I689e3f35f292586f83070a5443e382eedae1e555
web-platform-tests · May 7, 2024 · 73755b5 · 73755b5
1 parent f79be6c
commit 73755b5
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 7 deletions.
diff --git a/...select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html b/...select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html
@@ -7,7 +7,7 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <select style="appearance:base-select">
-  <button type=popover>one</button>
+  <button>one</button>
   <option>one</option>
   <option>two</option>
 </select>

diff --git a/...orms/the-select-element/stylable-select/select-button-type-popover-default.tentative.html b/...orms/the-select-element/stylable-select/select-button-type-popover-default.tentative.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=help href="https://github.com/openui/open-ui/issues/939#issuecomment-1910837275">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select {
+  appearance: base-select;
+}
+</style>
+
+<select id=select-one>
+  <button class=one>button one</button>
+  <button class=two>button two</button>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<select id=select-two>
+  <button class=one>button one</button>
+  <button class=two type=popover>button two</button>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<select id=select-three>
+  <button class=one type=popover>button one</button>
+  <button class=two type=popover>button two</button>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+promise_test(async () => {
+  const select = document.getElementById('select-one');
+  const b1 = select.querySelector('.one');
+  const b2 = select.querySelector('.two');
+
+  b1.click();
+  assert_true(select.matches(':open'),
+    'Clicking b1 should open the listbox.');
+  b1.click();
+  assert_false(select.matches(':open'),
+    'Clicking b1 again should close the listbox.');
+
+  b2.click();
+  assert_true(select.matches(':open'),
+    'Clicking b2 should open the listbox.');
+  b2.click();
+  assert_false(select.matches(':open'),
+    'Clicking b2 again should close the listbox.');
+}, 'If there are two buttons without type=popover, then they should both open the listbox.');
+
+promise_test(async () => {
+  const select = document.getElementById('select-two');
+  const b1 = select.querySelector('.one');
+  const b2 = select.querySelector('.two');
+
+  b1.click();
+  assert_false(select.matches(':open'),
+    'Clicking b1 should not open the listbox.');
+
+  b2.click();
+  assert_true(select.matches(':open'),
+    'Clicking b2 should open the listbox.');
+  b2.click();
+  assert_false(select.matches(':open'),
+    'Clicking b2 again should close the listbox.');
+}, 'If there are two buttons and one has type=popover, then only the type=popover one should open the listbox.');
+
+promise_test(async () => {
+  const select = document.getElementById('select-three');
+  const b1 = select.querySelector('.one');
+  const b2 = select.querySelector('.two');
+
+  b1.click();
+  assert_true(select.matches(':open'),
+    'Clicking b1 should open the listbox.');
+  b1.click();
+  assert_false(select.matches(':open'),
+    'Clicking b1 again should close the listbox.');
+
+  b2.click();
+  assert_true(select.matches(':open'),
+    'Clicking b2 should open the listbox.');
+  b2.click();
+  assert_false(select.matches(':open'),
+    'Clicking b2 again should close the listbox.');
+}, 'If there are two buttons and they both have type=popover, then they should both open the listbox.');
+</script>
diff --git a/...lect-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html b/...lect-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html
@@ -11,7 +11,7 @@
 </style>
 
 <select>
-  <button type=popover>button</button>
+  <button>button</button>
   <datalist>
     <option>
       <span class=blue>option</span> one

diff --git a/.../forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html b/.../forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html
@@ -10,7 +10,7 @@
 </style>
 
 <select style="appearance:base-select">
-  <button type=popover>button</button>
+  <button>button</button>
   <datalist>
     <option>
       <span class=blue>option</span> one

diff --git a/.../forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html b/.../forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html
@@ -8,7 +8,7 @@
 <script src="/resources/testdriver-actions.js"></script>
 
 <select style="appearance:base-select">
-  <button type=popover>button</button>
+  <button>button</button>
   <datalist>
     <option class=one>one</option>
     <option class=two>two</option>

diff --git a/...emantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html b/...emantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html
@@ -34,14 +34,14 @@
   </select>
 
   <select id=custombutton-defaultdatalist>
-    <button type=popover>custom button</button>
+    <button>custom button</button>
     <option class=one>one</option>
     <option class=two>two</option>
     <option class=three>three</option>
   </select>
 
   <select id=custombutton-customdatalist>
-    <button type=popover>custom button</button>
+    <button>custom button</button>
     <datalist>
       <option class=one>one</option>
       <option class=two>two</option>

diff --git a/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html
@@ -17,7 +17,7 @@
 
 <!-- TODO(http://crbug.com/1511354): Add test cases with no <button> and no <datalist>. -->
 <select>
-  <button type=popover>button</button>
+  <button>button</button>
   <datalist>
     <option class=one>one</option>
     <option class=two>two</option>