[select] listbox toggle/beforetoggle

[jh3y]

trafficstars

hey y'all 🤙

it's been a minute since dippin' in and playing around with select, etc.

in earlier versions, we were able to define the listbox element with slot and behavior. is this no longer the case?

how would you listen for when the select is open/closed? in earlier iterations, you could listen to beforetoggle/toggle on the listbox popover

forgive me if this is documented somewhere but couldn't find examples of doing this or docs about it

– jhey ʕ •ᴥ•ʔ

[lukewarlow]

Hmm I don't think there is currently, but a beforetoggle/toggle events for combobox select seems pretty reasonable.

[jh3y]

Hmm I don't think there is currently, but a beforetoggle/toggle events for combobox select seems pretty reasonable.

yeah - feels like this part has kinda got lost perhaps

understand that it's acceptable to wrap your options in any non-interactive elements like div etc. for presentation now, but without being able to hook into that listbox slot you can't access open/close lifecycle without writing a light dismiss handler, which feels a bit "brittle" in comparison

the event doesn't even bubble up to catch it in a wrapper for example 🤔

would be real handy to get access to that event whether it's exposed on the select or somewhere

I saw in another thread you mention CloseWatcher? there haven't been any specific events created for select have there? like open/close?

[lukewarlow]

Select doesn't have any events currently. Technically you could poll for :open matching or not but that's far from ideal.

[jh3y]

Select doesn't have any events currently. Technically you could poll for :open matching or not but that's far from ideal.

yeah - that was my take. the ideal approach seemed to be what we had access to prior. being able to access the state directly from the beforetoggle/togggle events is really convenient IMO

especially for particular designs where you want/need some extra control

[josepharhar]

Yeah since the popover picker element is in the UA shadowroot of the select element and its toggle/beforetoggle events aren't composed, there are no events when the picker is opened or closed.

Firing them on the select element instead sounds reasonable to me, hopefully that isn't too hard to get past standards.

Do you have a use case in mind that you could share to help justify the need for the events?

[jh3y]

Yeah since the popover picker element is in the UA shadowroot of the select element and its toggle/beforetoggle events aren't composed, there are no events when the picker is opened or closed.

Firing them on the select element instead sounds reasonable to me, hopefully that isn't too hard to get past standards.

Do you have a use case in mind that you could share to help justify the need for the events?

yeah - figured that might be the case

think it would be a valuable feature to bring back for sure – the use cases are likely niché, but having that opportunity would be great

perhaps a user wants to trigger something else on close, but input doesn't always cover that in the case of light dismiss. perhaps a user wants to fire something on open, which listening for button click can likely cover, but then requires another event listener. as opposed to being able to do it all under one event listener conditionally based on newState

would need to go through my prior demos to find other scenarios. the demo i'm working on now requires doing some scroll/transition stuff on close but means covering for esc key press, light dismiss click, and input/change on the select. but i believe all of these could be covered by listening to the beforetoggle event alone 🤙

[josepharhar]

Proposed resolution: add toggle and beforetoggle events to the select element

[jh3y]

awesome, thanks for the update 🤙

will certainly make that demo smaller

this was the demo that raised the ask: https://x.com/jh3yy/status/1941272674464039232

https://github.com/user-attachments/assets/cc2e0e56-5ae3-4161-b0cc-78a3e2934ca0

[css-meeting-bot]

The Open UI Community Group just discussed [select] listbox toggle/beforetoggle, and agreed to the following:

• RESOLVED: add toggle and beforetoggle events to the select element

The full IRC log of that discussion

<keithamus> jarhar: toggle/beforetoggle for customisable select, became no longer exposed after removing replacable popover
<keithamus> .. firing on <select> would make sense.
<masonf> q+
<keithamus> PROPOSED RESOLUTION: Firing toggle/beforetoggle on <select>
<keithamus> masonf: always nervous about adding (??). Is there logic... timing relative to the cloning behaviour? Is there anything to be worried about?
<keithamus> jarhar: go look where it's defined for popovers and change it to say it fires on the select element oo
<keithamus> .. can also do it for appearance:auto picker. Doing otherwise would mean its only for customisable select. I guess is fine but....
<keithamus> masonf: in spirit supportive as long as you don't run into issues.
<masonf> keithamus: I agree. Shouldn't be dependent on appearance:base. That would feel strange. Events based on style, even if it's kind of true.
<masonf> ack mason
<masonf> Proposed resolution: add toggle and beforetoggle events to the select element
<jarhar> Proposed resolution: add toggle and beforetoggle events to the select element
<keithamus> +1
<jarhar> RESOLVED: add toggle and beforetoggle events to the select element

[josepharhar]

I filed a whatwg issue here: https://github.com/whatwg/html/issues/11564