From 2c8ec6be8eff7d308591467fe2c33cfbca16138f Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Sat, 10 Apr 2021 20:48:42 +0530
Subject: [PATCH] fix modal rendering so keyboard shortcuts work on modal as
 well

---
 src/components/App.tsx    |  1 +
 src/components/Modal.scss | 10 +++++++---
 src/components/Modal.tsx  |  9 +++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f50540908..e21dc4887 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -489,6 +489,7 @@ class App extends React.Component<AppProps, AppState> {
           />
           <div className="excalidraw-textEditorContainer" />
           <div className="excalidraw-contextMenuContainer" />
+          <div className="excalidraw-modal-container" />
           {this.state.showStats && (
             <Stats
               appState={this.state}
diff --git a/src/components/Modal.scss b/src/components/Modal.scss
index 31705251c..1c31a8946 100644
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -1,9 +1,13 @@
 @import "../css/variables.module";
 
 .excalidraw {
-  &.excalidraw-modal-container {
-    position: absolute;
-    z-index: 10;
+  .excalidraw-modal-container {
+    &--visible {
+      position: absolute;
+      z-index: 10;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .Modal {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 25736832a..6e3923f87 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -65,20 +65,21 @@ const useBodyRoot = () => {
       .querySelector(".excalidraw")
       ?.classList.contains("theme--dark");
     const div = document.createElement("div");
-
-    div.classList.add("excalidraw", "excalidraw-modal-container");
+    const container = document.querySelector(".excalidraw-modal-container")!;
+    container.classList.add("excalidraw-modal-container--visible");
     div.classList.toggle("excalidraw--mobile", isMobileRef.current);
 
     if (isDarkTheme) {
       div.classList.add("theme--dark");
       div.classList.add("theme--dark-background-none");
     }
-    document.body.appendChild(div);
+    container.appendChild(div);
 
     setDiv(div);
 
     return () => {
-      document.body.removeChild(div);
+      container.classList.remove("excalidraw-modal-container--visible");
+      container!.removeChild(div);
     };
   }, []);