From 4b763317b398bf6cd99a487a4be63771af28ee7e Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Wed, 8 Jan 2025 02:47:52 +0900
Subject: [PATCH] exclude closing when click outside

---
 .../internal/components/Dialog/Dialog.tsx             | 11 +++++++++++
 .../Errors/ErrorPagination/ErrorPagination.tsx        |  5 ++++-
 .../error-overlay-bottom-stacks.tsx                   |  2 +-
 .../VersionStalenessInfo/VersionStalenessInfo.tsx     |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx
index 1d0f8c5eb74c1c..46b9f958aef3d1 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx
+++ b/packages/next/src/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx
index 4b7400259e05fe..930ce19ef26b10 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/ErrorPagination.tsx
+++ b/packages/next/src/client/components/react-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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx
index adf94c9fc48275..ae8244c92f07da 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx
index 03787cb8ca35d0..6c1ec4d707d048 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx
+++ b/packages/next/src/client/components/react-dev-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}