From 42db519a4391706f31e3662221b8762b80600f6d Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 18 Aug 2023 19:39:25 +1000
Subject: [PATCH] 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
---
 .../src/dashboard/components/confirmDeleteModal.tsx | 13 ++++++++++++-
 .../dashboard/components/managePermissionsModal.tsx |  9 +++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
index f98da1f722..1161b3cecb 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
+++ b/app/ide-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/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
index ff30242a30..a34430a7fe 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
+++ b/app/ide-desktop/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-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">