From ef8a225406bcbbf6028a6b694e03f1738b9c89b4 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Thu, 24 Jul 2025 10:59:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20use=20uniqueId=20for=20mo?=
 =?UTF-8?q?dal=20portals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a ModalProvider is mounted, it renders a div with an id which is use as
container to render modals through portals. But currently, if developer use
several CunninghamProvider across its application, a container with the same
id will be rendered several times that is weird. To prevent this kind of id
collision, we decide to generate a unique Id for each ModalProvider.

Resolve #352
---
 packages/react/src/components/Modal/ModalProvider.tsx | 11 ++++++-----
 packages/react/src/components/Modal/index.tsx         |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Modal/ModalProvider.tsx b/packages/react/src/components/Modal/ModalProvider.tsx
index cad3cda..3361efb 100644
--- a/packages/react/src/components/Modal/ModalProvider.tsx
+++ b/packages/react/src/components/Modal/ModalProvider.tsx
@@ -7,6 +7,7 @@ import React, {
   ReactNode,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from "react";
@@ -112,6 +113,8 @@ export const ModalProvider = ({
   modalParentSelector,
 }: ModalProviderProps) => {
   const [modals, setModals] = useState<ModalMap>({} as ModalMap);
+  const modalId = useId();
+  const modalParentId = `c__modals-portal-${modalId}`;
 
   useEffect(() => {
     ReactModal.setAppElement(".c__app");
@@ -160,10 +163,8 @@ export const ModalProvider = ({
       confirmationModal: ModalHelper(ConfirmationModal),
       messageModal: ModalHelper(MessageModal),
       modalParentSelector: () => {
-        if (modalParentSelector) {
-          return modalParentSelector();
-        }
-        return document.getElementById("c__modals-portal")!;
+        if (modalParentSelector) return modalParentSelector();
+        return document.getElementById(modalParentId)!;
       },
     }),
     [],
@@ -172,7 +173,7 @@ export const ModalProvider = ({
   return (
     <ModalContext.Provider value={context}>
       {children}
-      <div id="c__modals-portal" />
+      <div id={modalParentId} />
       {Object.entries(modals).map(([key, modal]) => (
         <Fragment key={key}>{modal}</Fragment>
       ))}
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index 516c691..e557663 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -58,7 +58,7 @@ export type ModalProps = PropsWithChildren & {
 export const Modal = (props: ModalProps) => {
   /**
    * This is a workaround to prevent the modal from rendering on the first render because if the modal is open on the
-   * first render, it will not be able to resolve document.getElementById("c__modals-portal") which is not rendered yet.
+   * first render, it will not be able to resolve document.getElementById(<MODAL_PARENT_ID>) which is not rendered yet.
    */
   const [firstRender, setFirstRender] = React.useState(true);
   useEffect(() => {