From c407eb5c7d00910a69843681a7a99bf677354ca8 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 27 Oct 2024 02:19:43 +0300
Subject: [PATCH] web/modal: allow closing modals with escape

---
 web/src/ui/modal/Modal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/src/ui/modal/Modal.tsx b/web/src/ui/modal/Modal.tsx
index 2e5fbc7..4b99de4 100644
--- a/web/src/ui/modal/Modal.tsx
+++ b/web/src/ui/modal/Modal.tsx
@@ -40,12 +40,18 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
 		}
 		setState(null)
 	}, [])
+	const onKeyWrapper = useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {
+		if (evt.key === "Escape") {
+			setState(null)
+		}
+	}, [])
 	return <>
 		<ModalContext value={setState}>
 			{children}
 			{state && <div
 				className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
 				onClick={onClickWrapper}
+				onKeyDown={onKeyWrapper}
 			>
 				<ModalCloseContext value={onClickWrapper}>
 					{state.content}