From cda226420f6c42679d594c02fd7f6fb103bfc236 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 10 Nov 2024 14:02:30 +0800
Subject: [PATCH] fix: dismiss non-important modal when click outside, fix
 #1468

Signed-off-by: Innei <i@innei.in>
---
 apps/renderer/src/components/ui/modal/stacked/modal.tsx    | 3 +--
 apps/renderer/src/components/ui/modal/stacked/provider.tsx | 6 ++++--
 packages/utils/src/dom.ts                                  | 7 +++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/renderer/src/components/ui/modal/stacked/modal.tsx
index 8254ab6d70..a454ac5bf3 100644
--- a/apps/renderer/src/components/ui/modal/stacked/modal.tsx
+++ b/apps/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -241,7 +241,7 @@ export const ModalInternal = memo(
               <Dialog.Content
                 asChild
                 aria-describedby={undefined}
-                onPointerDownOutside={(event) => event.preventDefault()}
+                onPointerDownOutside={preventDefault}
                 onOpenAutoFocus={openAutoFocus}
               >
                 <div
@@ -291,7 +291,6 @@ export const ModalInternal = memo(
             <Dialog.Content
               asChild
               aria-describedby={undefined}
-              // @ts-expect-error
               onPointerDownOutside={preventDefault}
               onOpenAutoFocus={openAutoFocus}
             >
diff --git a/apps/renderer/src/components/ui/modal/stacked/provider.tsx b/apps/renderer/src/components/ui/modal/stacked/provider.tsx
index ecbcdfce5d..cbe957c83c 100644
--- a/apps/renderer/src/components/ui/modal/stacked/provider.tsx
+++ b/apps/renderer/src/components/ui/modal/stacked/provider.tsx
@@ -32,14 +32,16 @@ const ModalStack = () => {
   const overlayOptions = stack[overlayIndex]?.overlayOptions
 
   const hasModalStack = stack.length > 0
+  const topModalIsNotSetAsAModal = topModalIndex !== stack.length - 1
 
   useEffect(() => {
     // NOTE: document.body is being used by radix's dismissable,
     // and using that will cause radix to get the value of `none` as the store value,
     // and then revert to `none` instead of `auto` after a modal dismiss.
-    document.documentElement.style.pointerEvents = hasModalStack ? "none" : "auto"
+    document.documentElement.style.pointerEvents =
+      hasModalStack && !topModalIsNotSetAsAModal ? "none" : "auto"
     document.documentElement.dataset.hasModal = hasModalStack.toString()
-  }, [hasModalStack])
+  }, [hasModalStack, topModalIsNotSetAsAModal])
   return (
     <AnimatePresence mode="popLayout">
       {stack.map((item, index) => (
diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts
index 0bb23f924d..96f37407ef 100644
--- a/packages/utils/src/dom.ts
+++ b/packages/utils/src/dom.ts
@@ -1,8 +1,7 @@
-import type { ReactEventHandler } from "react"
+export const stopPropagation = <T extends { stopPropagation: () => any }>(e: T) =>
+  e.stopPropagation()
 
-export const stopPropagation: ReactEventHandler<any> = (e) => e.stopPropagation()
-
-export const preventDefault: ReactEventHandler<any> = (e) => e.preventDefault()
+export const preventDefault = <T extends { preventDefault: () => any }>(e: T) => e.preventDefault()
 
 export const nextFrame = (fn: (...args: any[]) => any) => {
   requestAnimationFrame(() => {