Attach onX handlers to root so they don't interact with modals (#288)

lewish · Mar 19, 2024 · 2f9729e · 2f9729e
1 parent 4e5eaed
commit 2f9729e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/client/app.tsx b/client/app.tsx
@@ -72,11 +72,11 @@ async function render() {
 // tslint:disable-next-line: no-console
 render().catch((e) => console.log(e));
 
-window.addEventListener("keypress", (e) => controller.handleKeyPress(e));
-window.addEventListener("keydown", (e) => controller.handleKeyDown(e));
-window.addEventListener("keyup", (e) => controller.handleKeyUp(e));
+document.getElementById("root").addEventListener("keypress", (e) => controller.handleKeyPress(e));
+document.getElementById("root").addEventListener("keydown", (e) => controller.handleKeyDown(e));
+document.getElementById("root").addEventListener("keyup", (e) => controller.handleKeyUp(e));
 
-window.document.addEventListener("paste", (e) => {
+document.addEventListener("paste", (e) => {
   e.preventDefault();
   // Text tool manages pasting it's own way.
   const clipboardText = e.clipboardData.getData("text");

diff --git a/client/view.tsx b/client/view.tsx
@@ -59,6 +59,7 @@ export const View = ({ ...rest }: React.HTMLAttributes<HTMLCanvasElement>) =>
       <canvas
         width={document.documentElement.clientWidth}
         height={document.documentElement.clientHeight}
+        tabIndex={0}
         style={{
           backgroundColor: colors.background,
           cursor: store.computedCurrentCursor,