diff --git a/src/components/shared/FullscreenElement/FullscreenElement.tsx b/src/components/shared/FullscreenElement/FullscreenElement.tsx index 17bbe9d39..52d974ed5 100644 --- a/src/components/shared/FullscreenElement/FullscreenElement.tsx +++ b/src/components/shared/FullscreenElement/FullscreenElement.tsx @@ -53,6 +53,17 @@ function FullscreenElementPortal({ }; }, [fullscreen, defaultMountElement]); + // When fullscreen, stop keyboard events from reaching document-level listeners + // (e.g. ContextPanelProvider's Escape handler that would clear the panel and + // unmount this component's parent). + useEffect(() => { + if (!fullscreen) return; + const container = containerElementRef.current; + const stopPropagation = (e: KeyboardEvent) => e.stopPropagation(); + container.addEventListener("keydown", stopPropagation); + return () => container.removeEventListener("keydown", stopPropagation); + }, [fullscreen]); + return createPortal(<>{children}, containerElementRef.current, id.current); } diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 98b124981..2e673e052 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -86,6 +86,7 @@ function DialogContent({ className, )} onKeyDown={handleKeyDown} + onFocusOutside={(e) => e.preventDefault()} {...props} > {children}