Escape Key Closes Modals onKeyDown and Overlays onKeyUp

[dleavitt]

Describe the bug

Why do Modals (and Dropdowns) use keyDown while Overlays use keyUp? Is there a principle or is this just happenstance?

Motivation is that if you're building a UI element that responds to the escape key, you'll need to stopPropagation of both events in order to make it safe to use inside both modals and other types of overlays. Devs on my team have rediscovered this a couple of times now.

To Reproduce

Overlays

1. Go here: https://react-restart.github.io/ui/useRootClose
2. Press and hold the escape key
3. Overlay is still there
4. Release the escape key
5. Overlay goes away

Modals

1. Go here: https://react-restart.github.io/ui/Modal
2. Press and hold the escape key
3. Modal is gone!

Expected behavior

Presumably they should both trigger off the same event. Or maybe they shouldn't!

If so, probably keyDown since bootstrap unambiguously uses that for modals & dropdowns.

Even better would be to make it configurable, but implementation of that doesn't seem straightforward.

Environment (please complete the following information)

• Operating System: macOS
• Browser, Version: chrome, 118
• react-restart Version v1.6.3 (or whatever's deployed to github pages at the moment)

Additional context

Overlay: https://github.com/react-restart/ui/blob/44dc346744b37c33bd0d0309e5cd827751fce9c4/src/useRootClose.ts#L39

Modal: https://github.com/react-restart/ui/blob/44dc346744b37c33bd0d0309e5cd827751fce9c4/src/Modal.tsx#L399-L407

Bootstrap Modal: https://github.com/react-bootstrap/react-bootstrap/blob/a58a0cd6e548c653cda23ed529f3cff69ec123cc/src/Modal.tsx#L382