fix: modal disappear can't interaction

Signed-off-by: Innei <i@innei.in>
RSSNext · Jul 18, 2024 · 74e644e · 74e644e
1 parent c5ab7af
commit 74e644e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -6,7 +6,8 @@ import { ErrorComponentType } from "@renderer/components/errors"
 import { stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { useAnimationControls, useDragControls } from "framer-motion"
-import { useSetAtom } from "jotai"
+import { useAtomValue, useSetAtom } from "jotai"
+import { selectAtom } from "jotai/utils"
 import type { PointerEventHandler, SyntheticEvent } from "react"
 import {
   createElement,
@@ -47,6 +48,15 @@ export const ModalInternal: Component<{
       onPropsClose?.(false)
     })
 
+    const currentIsClosing = useAtomValue(
+      useMemo(
+        () =>
+          selectAtom(modalStackAtom, (atomValue) =>
+            atomValue.every((modal) => modal.id !== item.id)),
+        [item.id],
+      ),
+    )
+
     const onClose = useCallback(
       (open: boolean): void => {
         if (!open) {
@@ -78,6 +88,7 @@ export const ModalInternal: Component<{
     const dismiss = useCallback(
       (e: SyntheticEvent) => {
         e.stopPropagation()
+
         close()
       },
       [close],
@@ -156,6 +167,13 @@ export const ModalInternal: Component<{
       </CurrentModalContext.Provider>
     )
 
+    useEffect(() => {
+      if (currentIsClosing) {
+        // Radix dialog will block pointer events
+        document.body.style.pointerEvents = "auto"
+      }
+    }, [currentIsClosing])
+
     const edgeElementRef = useRef<HTMLDivElement>(null)
 
     if (CustomModalComponent) {
@@ -170,6 +188,7 @@ export const ModalInternal: Component<{
                 <div
                   className={cn(
                     "fixed inset-0 z-20 overflow-auto",
+                    currentIsClosing && "pointer-events-none",
                     modalContainerClassName,
                   )}
                   onClick={clickOutsideToDismiss ? dismiss : undefined}
@@ -200,6 +219,7 @@ export const ModalInternal: Component<{
                 style={zIndexStyle}
                 className={cn(
                   "center fixed inset-0 z-20 flex",
+                  currentIsClosing && "!pointer-events-none",
                   modalContainerClassName,
                 )}
                 onClick={clickOutsideToDismiss ? dismiss : noticeModal}

diff --git a/src/renderer/src/components/ui/modal/stacked/overlay.tsx b/src/renderer/src/components/ui/modal/stacked/overlay.tsx
@@ -5,19 +5,15 @@ import { forwardRef } from "react"
 import { RootPortal } from "../../portal"
 
 export const ModalOverlay = forwardRef(
-  (
-    { onClick, zIndex }: { onClick?: () => void, zIndex?: number },
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
+  ({ zIndex }: { zIndex?: number }, ref: ForwardedRef<HTMLDivElement>) => (
     <RootPortal>
       <m.div
         ref={ref}
         id="modal-overlay"
-        onClick={onClick}
-        className="fixed inset-0 z-[11] bg-zinc-50/80 dark:bg-neutral-900/80"
+        className="pointer-events-none fixed inset-0 z-[11] bg-zinc-50/80 dark:bg-neutral-900/80"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
+        exit={{ opacity: 0, transition: { duration: 0 } }}
         style={{ zIndex }}
       />
     </RootPortal>

diff --git a/src/renderer/src/components/ui/modal/stacked/provider.tsx b/src/renderer/src/components/ui/modal/stacked/provider.tsx
@@ -1,4 +1,5 @@
 import { useUISettingKey } from "@renderer/atoms/settings/ui"
+import { AnimatePresence } from "framer-motion"
 import { useAtomValue } from "jotai"
 import type { FC, PropsWithChildren } from "react"
 
@@ -25,7 +26,7 @@ const ModalStack = () => {
   const forceOverlay = stack.some((item) => item.overlay)
 
   return (
-    <>
+    <AnimatePresence mode="popLayout">
       {stack.map((item, index) => (
         <ModalInternal
           key={item.id}
@@ -35,6 +36,6 @@ const ModalStack = () => {
         />
       ))}
       {stack.length > 0 && (modalSettingOverlay || forceOverlay) && <ModalOverlay zIndex={MODAL_STACK_Z_INDEX + stack.length - 1} />}
-    </>
+    </AnimatePresence>
   )
 }