[DevOverlay] close popover/overlay on Esc

vercel · Jan 14, 2025 · edc28ca · edc28ca
1 parent 6616e20
commit edc28ca
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/...rlay/_experimental/internal/components/Errors/dev-tools-indicator/dev-tools-indicator.tsx b/...rlay/_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/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -197,6 +197,17 @@ export function Errors({
     }
   }, [errors.length, minimize])
 
+  useEffect(() => {
+    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'), [])