Disable shortcuts in modals (#7602)

- Fixes https://github.com/enso-org/enso/issues/7600
- Prevents all `keydown` events from propagating out of modals

# Important Notes
None
This commit is contained in:
somebody1234 2023-08-18 19:39:25 +10:00 committed by GitHub
parent eb86d6961b
commit 42db519a43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 1 deletions

View File

@ -38,7 +38,18 @@ export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
return (
<Modal centered className="bg-dim">
<div className="relative rounded-2xl pointer-events-auto">
<div
ref={element => {
element?.focus()
}}
tabIndex={-1}
className="relative rounded-2xl pointer-events-auto"
onKeyDown={event => {
if (event.key !== 'Escape') {
event.stopPropagation()
}
}}
>
<div className="absolute rounded-2xl bg-frame-selected backdrop-blur-3xl w-full h-full" />
<form
onClick={event => {

View File

@ -232,6 +232,10 @@ export default function ManagePermissionsModal(props: ManagePermissionsModalProp
className="absolute overflow-hidden bg-dim w-full h-full top-0 left-0 z-1"
>
<div
ref={element => {
element?.focus()
}}
tabIndex={-1}
style={
position != null
? {
@ -248,6 +252,11 @@ export default function ManagePermissionsModal(props: ManagePermissionsModalProp
mouseEvent.stopPropagation()
mouseEvent.preventDefault()
}}
onKeyDown={event => {
if (event.key !== 'Escape') {
event.stopPropagation()
}
}}
>
<div className="absolute bg-frame-selected backdrop-blur-3xl rounded-2xl h-full w-full" />
<div className="relative flex flex-col rounded-2xl gap-2 p-2">