Disable shortcuts in modals

enso-org · Aug 17, 2023 · aad0c2f · aad0c2f
1 parent d11745a
commit aad0c2f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/...-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx b/...-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
@@ -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 => {

diff --git a/...ktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx b/...ktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
@@ -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-10"
             >
                 <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">