From acb7aa88da90f2f85fd3779a7d1471e2e2604eee Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sat, 10 Aug 2024 16:41:16 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Close=20expanded=20poll=20with=20es?=
 =?UTF-8?q?c=20key=20(#1253)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/poll/desktop-poll.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/apps/web/src/components/poll/desktop-poll.tsx b/apps/web/src/components/poll/desktop-poll.tsx
index 23fd409f5..351a6ce5a 100644
--- a/apps/web/src/components/poll/desktop-poll.tsx
+++ b/apps/web/src/components/poll/desktop-poll.tsx
@@ -37,6 +37,24 @@ import ParticipantRow from "./desktop-poll/participant-row";
 import ParticipantRowForm from "./desktop-poll/participant-row-form";
 import PollHeader from "./desktop-poll/poll-header";
 
+function EscapeListener({ onEscape }: { onEscape: () => void }) {
+  React.useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onEscape();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onEscape]);
+
+  return null;
+}
+
 const useIsOverflowing = <E extends Element | null>(
   ref: React.RefObject<E>,
 ) => {
@@ -204,6 +222,7 @@ const DesktopPoll: React.FunctionComponent = () => {
               </TooltipContent>
             </Tooltip>
           )}
+          {expanded ? <EscapeListener onEscape={collapse} /> : null}
         </div>
       </div>
     );