exclude closing when click outside

vercel · Jan 9, 2025 · ff112b2 · ff112b2
1 parent 1b5c01a
commit ff112b2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/...c/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx b/...c/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx
@@ -25,6 +25,17 @@ const Dialog: React.FC<DialogProps> = function Dialog({
     setDialog(node)
   }, [])
   useOnClickOutside(dialog, (e) => {
+    // Since we have UIs that live outside the dialog, but are
+    // treated as part of the dialog (e.g. floating header and bottom stacks),
+    // we need to exclude clicks on these elements from closing the dialog
+    if (
+      (e.target as Element).closest(
+        '.dialog-exclude-closing-from-outside-click'
+      )
+    ) {
+      return
+    }
+
     e.preventDefault()
     return onClose?.()
   })

diff --git a/...-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx b/...-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx
@@ -114,7 +114,10 @@ export function ErrorPagination({
   }, [nav, activeIdx, readyErrors.length])
 
   return (
-    <div data-nextjs-dialog-left-right>
+    <div
+      data-nextjs-dialog-left-right
+      className="dialog-exclude-closing-from-outside-click"
+    >
       <nav ref={onNav}>
         <button
           ref={buttonLeft}

diff --git a/...al/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx b/...al/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx
@@ -10,7 +10,7 @@ export function ErrorOverlayBottomStacks({
   activeIdx,
 }: ErrorOverlayBottomStacksProps) {
   return (
-    <div className="error-overlay-bottom-stacks-wrapper">
+    <div className="error-overlay-bottom-stacks-wrapper dialog-exclude-closing-from-outside-click">
       {errorsCount > 1 && (
         <div
           className={`error-overlay-bottom-stack-1 ${

diff --git a/...v-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx b/...v-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx
@@ -12,7 +12,7 @@ export function VersionStalenessInfo({
   if (!text) return null
 
   return (
-    <span className="nextjs-container-build-error-version-status">
+    <span className="nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click">
       <span className={indicatorClass} />
       <small data-nextjs-version-checker title={title}>
         {text}