material-web icon indicating copy to clipboard operation
material-web copied to clipboard

Published 20 hours ago • verified publisher icon material-components

Closing dialog with "esc" does not remove scrim

Open hwallis93 opened this issue 1 year ago • 6 comments

What is affected?

Accessibility, Component

Description

When I close a dialog by pressing the "esc" key the dialog closes but the scrim remains, which I wouldn't expect it to.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nzeagr?file=index.html

Workaround

I guess you could query for the presence of the scrim onClose and delete it if you found it.

Is this a regression?

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

Affected versions

Failing in v1.1.1 and v1.0.0

Browser/OS/Node environment

Browser: Edge 120.0.2210.133 OS: Windows 11 10.0.22621 Node: v18.18.0 NPM: v10.2.3

hwallis93 avatar Jan 15 '24 14:01 hwallis93

I tried the workaround I suggested on StackBlitz, but looks like neither the close nor closed events fire when you hit Esc so it doesn't work. Perhaps that has something to do with the bug?

hwallis93 avatar Jan 15 '24 14:01 hwallis93

Ah looks like this is probably just #5330

hwallis93 avatar Jan 15 '24 14:01 hwallis93

Can you try using @material/web@nightly to see if that fixes it?

asyncliz avatar Jan 16 '24 18:01 asyncliz

I upgraded to "@material/web": "^1.1.2-nightly.7dd7a68.0" and it's somewhat better but not quite fixed, now the position of my mouse seems to make a difference 😖

  • Mouse hovering over the button that triggered the dialog: The scrim fails to dismiss ~90% of the time
  • Mouse hovering anywhere else: The scrim successfully dismisses ~90% of the time

I've fiddled with having extra buttons and hovering over them instead, but it only seems to matter whether I'm hovering the button that triggered the dialog

I notice that after dismissing the dialog with "esc" that the button that triggered the dialog gains keyboard focus, whereas if I dismiss the dialog by clicking outside of it it doesn't. Could that have something to do with it?

Here's a video of me opening the dialog and hitting "esc" a bunch of times to show what I mean

https://github.com/material-components/material-web/assets/29500397/2736a251-03cd-48c7-a49c-1912cf3784cf

hwallis93 avatar Jan 17 '24 09:01 hwallis93

Hmm, does it work as expected on Safari and Firefox? If you have an old version of Chrome, does it work in 119?

I suspect it may be related to chrome's new CloseWatcher APIs introduced in 120.

asyncliz avatar Jan 19 '24 18:01 asyncliz

Everything seems to work as expected in Firefox. I don't have an older version of Chrome to try it on I'm afraid

hwallis93 avatar Jan 21 '24 10:01 hwallis93