Skip to content

Escape key closes multiple components #395

Closed
@stephan281094

Description

🐛 Bug report

Current Behavior

When you have an open combobox inside of an open dialog and you hit the escape key, it closes both the combobox and the dialog.

Screenshot 2019-11-29 at 17 14 30

Expected behavior

Instead of closing both the combobox and the dialog, it should only close the combobox when hitting the escape key.

Reproducible example

https://codesandbox.io/embed/reach-ui-template-7uyon

Suggested solution(s)

Maybe use a global stack that keeps track of all dismissible UI elements that listen to "escape". Every time you hit "escape" it could call pop() to only call the onDismiss of the "deepest" UI element.

Additional context

Perhaps the same issue occurs with other combinations of UI elements.

Your environment

Software Name/Version(s)
@reach/combobox 0.1.1
@reach/dialog 0.2.9
React 16.10.1
Browser Google Chrome 78.0.3904.108
Assistive tech none
Node 11.15.0
npm/yarn Yarn 1.17.3
Operating System MacOS Catalina 10.15.1

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions