fix: dismiss non-important modal when click outside, fix #1468

Signed-off-by: Innei <i@innei.in>

Author: Innei

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}
             >

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) => (

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(() => {