From 7587db9c8b2528a34aebfd139ee8ceda895b1296 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 5 Oct 2023 14:40:13 +0300
Subject: [PATCH] close modal with esc

---
 packages/app/src/Element/Modal.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index 576f9cca4..d67b35987 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/packages/app/src/Element/Modal.tsx
@@ -4,14 +4,25 @@ import { ReactNode, useEffect } from "react";
 export interface ModalProps {
   id: string;
   className?: string;
-  onClose?: (e: React.MouseEvent) => void;
+  onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
   children: ReactNode;
 }
 
 export default function Modal(props: ModalProps) {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && props.onClose) {
+      props.onClose(e);
+    }
+  };
+
   useEffect(() => {
     document.body.classList.add("scroll-lock");
-    return () => document.body.classList.remove("scroll-lock");
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.classList.remove("scroll-lock");
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, []);
 
   return (