From d8166d9e1d1688dba4373584e06c1535184fb45e Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:06:15 +0100
Subject: [PATCH] fix: dialog remounting on className updates (#7224)

---
 src/hooks/useCreatePortalContainer.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useCreatePortalContainer.ts b/src/hooks/useCreatePortalContainer.ts
index f56011ed1..34b413738 100644
--- a/src/hooks/useCreatePortalContainer.ts
+++ b/src/hooks/useCreatePortalContainer.ts
@@ -17,9 +17,13 @@ export const useCreatePortalContainer = (opts?: {
 
   useLayoutEffect(() => {
     if (div) {
+      div.className = "";
+      div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
       div.classList.toggle("excalidraw--mobile", device.isMobile);
+      div.classList.toggle("excalidraw--mobile", isMobileRef.current);
+      div.classList.toggle("theme--dark", theme === "dark");
     }
-  }, [div, device.isMobile]);
+  }, [div, theme, device.isMobile, opts?.className]);
 
   useLayoutEffect(() => {
     const container = opts?.parentSelector
@@ -32,10 +36,6 @@ export const useCreatePortalContainer = (opts?: {
 
     const div = document.createElement("div");
 
-    div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
-    div.classList.toggle("excalidraw--mobile", isMobileRef.current);
-    div.classList.toggle("theme--dark", theme === "dark");
-
     container.appendChild(div);
 
     setDiv(div);
@@ -43,7 +43,7 @@ export const useCreatePortalContainer = (opts?: {
     return () => {
       container.removeChild(div);
     };
-  }, [excalidrawContainer, theme, opts?.className, opts?.parentSelector]);
+  }, [excalidrawContainer, opts?.parentSelector]);
 
   return div;
 };