Selects interplay with popover is sometimes surprising. #12099
Description
What is the issue with the HTML Standard?
<!doctype html>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="s2">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="s3">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<style>
#s2, #s3 {
appearance: base-select;
}
#s3::picker(select) {
appearance: base-select;
}
</style>
<div id="p" popover="" style="inset: 40px; margin: 0; width: 200px"></div>
<script>
document.addEventListener("click", () => {
setTimeout(() => p.showPopover(), 500);
}, true);
p.showPopover();
</script>There are three different selects:
- Select 1 is auto appearance.
- Select 2 is base-select but the picker is auto
- Select 3 is base-select with a base-select picker.
When the page opens the popover is open. Try three different steps:
-
Click select 1.
-
Observe popover remains open, picker opens.
-
Click select 2.
-
Observe popover remains open, picker opens.
-
Click select 3.
-
Observe popover closes, picker opens. Observe that after 500ms the picker closes as the popover re-opens.
The inconsistency between all means this is not simply progressive enhancement. This seems to be a meaningful semantic change based on styling. So I'd suggest we have a few options:
- Make select's base-select a manual popover so that it does participate in the hide popover steps.
- Make select's auto appearance picker respect the hide popover algorithm steps and hide, perhaps by making it a auto popover.