Add ToggleEvents to <dialog>.showModal()

[keithamus]

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 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.

Spec PR

[lukewarlow]

How about via show()? I assume it would also fire the toggle event?

[keithamus]

During the WHATWG Triage Session at TPAC today, WHATWG has resolved that <dialog> will dispatch a cancelable beforetoggle event during open and non-cancelable during close, and non-cancelable toggle event an async tick after; similarly to how popover (and soon to be <details> - see #9743) will.

[domenic]

Small correction: beforetoggle should be non-cancelable during close as well. (This matches popover.)

[josepharhar]

keith made a PR to implement this here: #10091
I wrote a chromium implementation here: https://chromium-review.googlesource.com/c/chromium/src/+/5238172

[teetotum]

The <dialog> element currently has a close event that authors can use to know that a dialog has closed (and run some code like removing event listeners).
A corresponding open event does not yet exist (although I hoped it would be added to the spec eventually).
How are the new toggle events related to the (already existing) close event and the (hypothetical) open event?

Am I correct to assume that a ToggleEvent: newState=closed would be equivalent to the close event for all intents and purposes and therefore it wouldn't really matter which one I would use? (edit: it seems there might be a slight difference in how they are raised by the platform (synchronous or via microtask); but this should not make a practical difference to consumers of these events)
And that a ToggleEvent: newState=open would be equivalent to the hypothetical open event?
And finally that the existence of a ToggleEvent would crush the last remaining hope that we will ever get a symmetrical open event corresponding to the close event?

[woody-li]

Is there any difference between show() and showModal().

[rejhgadellaa]

Yes, showModal() opens the dialog as a modal (blocks interaction with the document), show() does not:

The showModal() method of the HTMLDialogElement interface displays the dialog as a modal.
MDN

[woody-li]

@rejhgadellaa Thanks for your reply.
But I mean the toggle / beforetoggle event difference between show() and showModal().

I didn't find any difference in the descriptions below:

a Dialog's show() steps should dispatch a beforetoggle cancellable event
followed by a queuing a non-cancellable toggle event.
a Dialog's showModal() steps should dispatch a beforetoggle cancellable event
followed by a queuing non-cancellable toggle event.

[keithamus]

The difference will be that event.target.matches(':modal') will be true for toggle when calling showModal() and beforetoggle when calling .close() on a :modal.

There will be a limitation that beforetoggle when opening a dialog as either show()/showModal() will be indistuingishable, and toggle will be indistinguishable when a dialog has closed.