From 654485e4c05ceed9b3acc366e8f5820507467a5d Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Tue, 14 Jan 2025 14:50:06 -0800
Subject: [PATCH] [DevOverlay] close popover/overlay on Esc

---
 .../dev-tools-indicator/dev-tools-indicator.tsx   | 15 +++++++++++++--
 .../_experimental/internal/container/Errors.tsx   | 12 ++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx
index 262bb16b7dde2..e37e63e2d6f69 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -55,8 +55,8 @@ const DevToolsPopover = ({
   const buttonRef = useRef<HTMLDivElement>(null)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
-  // Close popover when clicking outside of it or its button
   useEffect(() => {
+    // Close popover when clicking outside of it or its button
     const handleClickOutside = (event: MouseEvent) => {
       if (
         !(popoverRef.current?.getBoundingClientRect()
@@ -77,8 +77,19 @@ const DevToolsPopover = ({
       }
     }
 
+    // Close popover when pressing escape
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsPopoverOpen(false)
+      }
+    }
+
     document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
   }, [])
 
   const togglePopover = () => setIsPopoverOpen((prev) => !prev)
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
index 244c8829bb7c3..4e21444424cfd 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -197,6 +197,18 @@ export function Errors({
     }
   }, [errors.length, minimize])
 
+  useEffect(() => {
+    // Close the error overlay when pressing escape
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setDisplayState('minimized')
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
   const hide = useCallback(() => setDisplayState('hidden'), [])
   const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])