#1005: Dispatching Toggle Events for Dialog open/close

Visit on Github.

Opened Oct 17, 2024

こんにちは TAG-さん!

I'm requesting a TAG review of Dispatching Toggle Events for Dialog open/close.

It is useful for web authors do determine when their <dialog> elements open and close. popover already has ToggleEvent which is dispatched when a popover opens or closes, but <dialog> does not. The current way to detect when a <dialog> opens is to register a mutation observer to check for open, however, this is quite a lot of work where an event would be easier.

I propose we add dispatching of ToggleEvent for <dialog> also. To be explicit: when show or showModal is called, <dialog> should dispatch a ToggleEvent with newState=open. When a dialog is closed (via form or button or close signal) it should dispatch a ToggleEvent with newState=closed.

Further details:

  • I have reviewed the TAG's Web Platform Design Principles
  • Relevant time constraints or deadlines: Ideally in the next 2 weeks so we can continue to ship in Firefox.
  • The group where the work on this specification is currently being done: whatwg
  • The group where standardization of this work is intended to be done (if different from the current group): whatwg
  • Major unresolved issues with or opposition to this specification: None
  • This work is being funded by: GitHub

You should also know that...

I've enabled this in Firefox nightly targeting 133, it is currently flagged in Chromium, but I've raised an I2S (https://groups.google.com/a/chromium.org/g/blink-dev/c/PxluqSXWXD4/m/7q3qwklWAAAJ) and I'm aiming to ship in M132.

Discussions

2024-10-28

Minutes

<blockquote>

The two types ("before" and "on") of event seem very useful things to have.

Why is this "toggle" and not separate "open" and "close" events? The platform is not entirely consistent here, but these elements likely need distinct actions for the two cases. We can't see a reason for this being a single event type. (We'd like to see a path toward harmonization of events across the platform, but that's a larger project.)

We also agree with Dan about &lt;details> and the opportunity for future work. That's not in scope here, but we encourage you to look into it.

</blockquote>
2024-11-04

Minutes

Jeffrey: two comments to choose from..

Matthew: both about consistency

Peter: two different things to be consistent with

Amy: what if we gave them both paths to consistency and handed the decision back

Peter: ask for a broader conversation among stakeholders

Jeffrey: they're likely to pick the one they've already gone with. We're only going to get a change for using open and close if we really push for it

Peter: push harder on the fact that we have established precedent with the open pseudoclass and property and that wasn't taken into consideration properly in the past and should be rethought

Matthew: any explainer about where they considered the alternatives and discussed it

Jeffrey: it's in the issue discussion: https://github.com/openui/open-ui/issues/607#issuecomment-1309330785.

Matthew: also discussion about how things might expand in future.. open and close might be all we need. Is there another aspect for which we could say this is likely to be better.

Peter: I can redraft to blend them

Jeffrey: the :open pseudoclass is newer than all of this. CSS can't do toggle there, they have to do open and close.

Peter: a resting state, not a transition.

New draft for the second option, from Slack:

<blockquote>

We want to emphasize the goal of consistency across the platform, between CSS properties, HTML attributes, and JS methods and events. Unfortunately, none of these are consistent in the current platform, so this change needs to instead chart a plausibly-consistent path forward.

Because <details> and <dialog> have open attributes, CSS added :open and :closed properties, and the event handlers seem likely to be more different than similar, we're inclined to think that the better path forward is to use "open" and "close" everywhere. That implies that it would be best for popover to also migrate from show/hide to open/close. (It doesn't imply that we should try to get rid of the various toggle*() methods.) We recognize that retrofitting new names onto shipped features is a big project, so it would be acceptable to just apply this pattern in the future, but if the community generally approves of this path, we'll file issues in HTML to suggest the retrofit.

</blockquote>
2024-11-04

Minutes

Jeffrey: I had a useful discussion with them this morning... About idea... The objection that it's more typing for authors came up....

Lea: is the idea that open and close would still exist? or phase it out?

Jeffrey: for elements that already have open/close it would stick around but for new things it would be toggle. New state.

Lea: I like this.

Tess: this feels like one of those cases where we are chasing API design fads... Ideally the web's API surface moves more slowly than trends in JavaScript libraries? When we hadd things to the web platform that doesn't look like the web but looks like popular JS libraries, then I would like to see some justification for that... There's no such things as adding web features in a vaccuum. My knee-jerk worry.

Jeffrey: It looks like the precedent that Domenic was following was the details element which has toggle....

Lea: besides what Jeffrey mentioned about details it seems that on the web platform we use a single event for state changes... So that seems to be on par... More than an open and close event...

Yves: as we already have open/close it's easy to have another state. In the case of a toggle it might be more difficult... Especially if you have 2 ways of doing the same thing... something about not doing the same thing 2 different ways in the design principles? There might be dragons.

Dan: https://www.w3.org/TR/design-principles/#consistency ?

discussion on toggle vs state change?

Peter: like a light switch - 2 positions.

Lea: state change is way to generic.

Jeffrey: things are open and closed - not much prospect to add another state... Following precednet - they were right to extend toggle to dialog.

Lea: What about popover?

Peter: uses toggle.

Jeffrey: the event is called toggle but the actions are show and hide.

Peter: having open / close events would be more consistent with CSS... Checkboxes... that pattern comes from other input elements that definitely have more than 2 states. In my mind having open/close event feels more proper. Having them as separate event handlers might be more convenient. Consistency is my main concern. Popover is the odd one out... Not sure that's the pattern to follow. At least "pick a lane and stick to it."

Jeffrey: writes proposal comment

Dan: noting positive review from Mozilla: https://github.com/mozilla/standards-positions/issues/1101

Peter: details has a boolean open attribute... I'd love us to be consistent between CSS, properties, and events... right now it's inconsistent.

Lea: a shared toggle event class? Then you could also do isevent instance of toggleevent...

Peter: a common base class named toggle is fine but more concerned with the event names... I think there's value to developers (DX) to get some consistency... Suggest we leave the comment and not close... but get feedback from the broader community...

satisfied with concerns:

<blockquote>

We want to emphasize the goal of consistency across the platform, between CSS properties, attributes, methods, and events. Unfortunately, none of these are consistent. Based on the history of details having a toggle event and dialog only having a close event, we think popover was correct to use toggle, and then this change is correct to extend that to dialog. There's an argument that open/close would be more consistent with the CSS :open and :closed selectors, but we think it's worth keeping consistency with the events.

</blockquote>

Or unsatisfied:

<blockquote>

We want to emphasize the goal of consistency across the platform, between CSS properties, attributes, methods, and events. Unfortunately, none of these are consistent. Because the elements have open attributes, and CSS added :open and :closed properties, we think the better path forward would be to use "open" and "close" everywhere, across event names and method names. This implies that it would be ideal to retrofit open and close events onto popover too, and we'll file an issue with HTML to ask to do that.

</blockquote>