diff --git a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx b/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx index bc16fbcece..7cdc95cf55 100644 --- a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx +++ b/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx @@ -1,22 +1,29 @@ "use client" import * as React from "react" +import { useRef } from "react" import { createRoot } from "react-dom/client" import { RenderPrompt, RenderPromptProps } from "./render-prompt" type UsePromptProps = Omit const usePrompt = () => { - const prompt = async (props: UsePromptProps): Promise => { - return new Promise((resolve) => { - let open = true + const currentPromptPromise = useRef | null>(null) + const prompt = async (props: UsePromptProps): Promise => { + if (currentPromptPromise.current) { + return currentPromptPromise.current + } + + const promptPromise = new Promise((resolve) => { + let open = true const mountRoot = createRoot(document.createElement("div")) const onCancel = () => { open = false mountRoot.unmount() resolve(false) + currentPromptPromise.current = null // TEMP FIX for Radix issue with dropdowns persisting pointer-events: none on body after closing document.body.style.pointerEvents = "auto" @@ -26,6 +33,7 @@ const usePrompt = () => { open = false resolve(true) mountRoot.unmount() + currentPromptPromise.current = null // TEMP FIX for Radix issue with dropdowns persisting pointer-events: none on body after closing document.body.style.pointerEvents = "auto" @@ -44,6 +52,9 @@ const usePrompt = () => { render() }) + + currentPromptPromise.current = promptPromise + return promptPromise } return prompt