Skip to content

[Dialog] dismissible={false} doesn't prevent dismissing the modal on Escape key press #1688

Open
@benface

Description

@benface

Bug report

Current behavior

I noticed this behavior while writing #1687, and I'm not sure at all it's a bug, so maybe consider this a feature request... but I was really surprised to see that when passing dismissible={false} to Dialog.Root, the dialog was still dismissible when pressing the Escape key. That can of course be worked around by controlling the open state with open and onOpenChange, but it feels like something that should be handled automatically, since it already does prevent closing the dialog when clicking outside it / on the backdrop. I'm not sure what's different about pressing the Escape key, and I couldn't find anything in the ARIA spec about it.

Expected behavior

The behavior I expect, at least, is that dismissible={false} on Dialog.Root prevents closing the dialog when the Escape key is pressed (so if the open state is uncontrolled, the dialog stays open, and if it is controlled, onOpenChange is not called).

Reproducible example

https://codesandbox.io/p/devbox/wizardly-bohr-7h932q?file=%2Fsrc%2FApp.tsx%3A20%2C38-20%2C39&workspaceId=ws_VCLs2BtBqfm4WA73jXMWhM

Base UI version

1.0.0-alpha.7

Which browser are you using?

Chrome, Safari, and Firefox

Which OS are you using?

macOS

Which assistive tech are you using (if applicable)?

None

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: dialogThis is the name of the generic UI component, not the React module!status: expected behaviorDoes not imply the behavior is intended. Just that we know about it and can't work around it

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions