md-dialog: Escape key press does not close the dialog completely + navigation back on mobile not working

[kkachniarz220]

What is affected?

Component

Description

On escape key press the 'cancel' event is not emitting + backdrop layer is still visible
screen-capture

There is problem also with browser history back - backdrop layer is still visible (as on native browser )

Reproduction

simple md-dialog use

Workaround

.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.1.1

Browser/OS/Node environment

Browser: Chrome 120.0.6099.110
Windows 11
Node version: 18.17.1
npm version: 9.6.7

[asyncLiz]

Underlying issue is https://bugs.chromium.org/p/chromium/issues/detail?id=1512224

Think I can add a patch though

[josepharhar]

I think that dialog/internal/dialog.ts should be looking at both the close and cancel events. close will always fire, but in this case where the closing of the dialog is not preventable, the cancel event will not be fired.

It looks like the close event is not being listened to:

material-web/dialog/internal/dialog.ts

Line 244 in 50a9ffa

@cancel=${this.handleCancel}

[asyncLiz]

The Chromium bug still breaks the ability to detect if a dialog was canceled by pressing the escape key vs calling dialog.close().

Was there a breaking spec change where pressing the escape key closes a dialog without cancelation?

[josepharhar]

Yeah we changed the spec here: whatwg/html#9462

[asyncLiz]

Got a patch in #5329 that'll fix it for now, but gonna leave this open to track addressing non-cancelable CloseWatcher anti-abuse gestures, such as the Android back button or pressing escape twice.

[asyncLiz]

Actually going to track in #5330 to avoid scope creep with this issue