View transitions issue with dialog when press escape key

JavaScript
1

I put together a small dialog web component to experiment with View Transitions, and I’ve run into a behaviour I don’t understand.

All browsers support closing a <dialog> via the esc key, which triggers a cancel event. If I open one dialog, then open a second dialog on top of it, pressing esc key closes the most recently opened dialog and the View Transition runs as expected. However, pressing escape again to close the underlying dialog no longer triggers the View Transition.

If I add an explicit keydown event listener, the View Transition works as expected. Admittedly this is my first time dabbling with View Transitions but am i missing something obvious?

2

I dont get the behavior you’re describing.

The behavior works identically if i Escape from the first dialog or the second. Escape backs out of each dialog in turn.

Am i missing something other than an exceedingly overcomplicated recreation of a dialog object that already exists?

3

The behaviour is correct, but the view transition doesn’t take effect on the second escape key press.

  • Open first dialog
  • Open second dialog
  • Press esc key, you see the view transition for second dialog closing
  • Press esc key again, the view transition doesn’t show when the dialog closes
4

Yes I can see that behaviour but don’t know enough about it to say whether its a bug or not. If you nested more elements you would see that it fails on every second escape. Your keydown handler seems to be a suitable fix.

5

Apparently it is an anti-abuse measure according to some people close to the specs.

6

I agree it seems overcomplicated. What you are seeing is a stripped back attempt at animating out dialogs as right now it doesn’t work in Firefox. This is purely for learning. Once animations are working across all browsers I may add some slots and custom events etc.