From 4e6372bfdfda387e68e712edefa176bbe5ca6cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Thu, 13 Feb 2025 10:39:52 +0100
Subject: [PATCH] fix(design-system): singleton prompt (#11352)

**What**
- add a flag to disable rendering multiple prompts on a page

**Why**
- pressing "r" when a prompt is already open would stack additional prompts

---

CLOSES SUP-802

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
---
 .../ui/src/hooks/use-prompt/use-prompt.tsx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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<RenderPromptProps, "onConfirm" | "onCancel" | "open">
 
 const usePrompt = () => {
-  const prompt = async (props: UsePromptProps): Promise<boolean> => {
-    return new Promise((resolve) => {
-      let open = true
+  const currentPromptPromise = useRef<Promise<boolean> | null>(null)
 
+  const prompt = async (props: UsePromptProps): Promise<boolean> => {
+    if (currentPromptPromise.current) {
+      return currentPromptPromise.current
+    }
+
+    const promptPromise = new Promise<boolean>((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