[selectmenu] Method to apply styles only in open state

[hidde]

In a selectmenu-like pattern in our product, the button part has a background color while the select is open. I may be overlooking something obvious, but it looks to me like there isn't a way in the current <selectmenu> to apply styles to a button for an opened selectmenu.

https://user-images.githubusercontent.com/178782/173187334-913225bd-65b9-485b-bb36-5d078afc1176.mov

Video alt: text editor with selector for content semantics like heading level 1, heading level 2; while the selector is open, the button has a blue background, otherwise it is white

I wonder if there could be a way to allow for this, maybe through a pseudo class?

(Maybe related to https://github.com/openui/open-ui/issues/311)

[captainbrosset]

Correct, there is currently no way to style the selectmenu based on its open state (somewhat related too, there is no way to style it based on the position of the popup, which could be useful). This is a known limitation that I'm sure must be tracked somewhere, although I can't find an issue on this repo. @dandclark may know.

[hidde]

Ah yes, style based on position of popup would be great too, a common use case (and in video above) would be when the popup visually has an arrow that points to its trigger.

[dandclark]

I think it would make sense to have an :open pseudo class for this. I couldn't find an existing issue for this in the repro -- only the discussions relating to popup (#311). So unless someone else finds something let's track it here.

Styling based on the position of the popup would be a bit more complicated and the exact shape of it will depend on what comes out of the anchor positioning proposal. I would expect that for many use cases where developer cares about listbox positioning, they would be replacing the default listbox and swapping in their own, e.g. to add the arrow pointing back to the button. In this case they could query the popup position as it's exposed by anchor pos, without <selectmenu> also needing to expose this info. Although if it turns out to be useful to have it exposed on <selectmenu> that's something we could always add later.

[mfreed7]

For reference, CSSWG resolved to add :open which applies to things that can open and close. That would definitely seem to include <selectmenu>, as it explicitly already applies to <select>. I'm in favor of supporting :open here.

[hidde]

I forgot to set up the css-meeting-bot for this issue in the last minutes, so just to circle back:

Last week we got to this resolution:

<selectmenu> supports :open as specified in the CSSWG.

(as captured in the first part of the minutes)

[mfreed7]

I forgot to set up the css-meeting-bot for this issue in the last minutes, so just to circle back:

Last week we got to this resolution:

<selectmenu> supports :open as specified in the CSSWG.

(as captured in the first part of the minutes)

… and now also :closed.

[css-meeting-bot]

The Open UI Community Group just discussed [selectmenu] Method to apply styles only in open state.

The full IRC log of that discussion

<gregwhitworth> Topic: [selectmenu] Method to apply styles only in open state
<gregwhitworth> github: https://github.com/openui/open-ui/issues/547
<JonathanNeal> dandclark: should css have a pseudo class to see whether the selectmenu is open or not. there will be one that can apply generally to things, and we will use that.

[dandclark]

From a prior meeting:

RESOLUTION: <selectmenu> supports :open as specified in the CSSWG.

[josepharhar]

I am implementing :open and :closed in chromium here: https://chromium-review.googlesource.com/c/chromium/src/+/4370850 I am adding :open and :closed to the selectmenu explainer here: https://github.com/openui/open-ui/pull/692