From d697797bc558374f93c18a6db6ab560a34548238 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 7 Oct 2025 08:29:31 -0700
Subject: [PATCH 1/3] fix(modal): conditionally render children when open
 toggles

---
 packages/modal/src/Modal/Modal.spec.tsx |  6 ++++--
 packages/modal/src/Modal/ModalView.tsx  | 27 ++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/modal/src/Modal/Modal.spec.tsx b/packages/modal/src/Modal/Modal.spec.tsx
index 1c15c94567..1d64eeb3b1 100644
--- a/packages/modal/src/Modal/Modal.spec.tsx
+++ b/packages/modal/src/Modal/Modal.spec.tsx
@@ -253,11 +253,13 @@ describe('packages/modal', () => {
   });
 
   describe('when "open" prop is false', () => {
-    test('renders to DOM but dialog is not open', () => {
-      const { queryModal } = renderModal({ open: false });
+    test('renders dialog element but children are not rendered', () => {
+      const { queryModal, queryByText } = renderModal({ open: false });
       const modal = queryModal();
+      expect(modal).toBeInTheDocument();
       expect(modal).not.toHaveAttribute('open');
       expect(modal).not.toBeVisible();
+      expect(queryByText(modalContent)).not.toBeInTheDocument();
     });
   });
 
diff --git a/packages/modal/src/Modal/ModalView.tsx b/packages/modal/src/Modal/ModalView.tsx
index dd24a26574..ee5eca27d1 100644
--- a/packages/modal/src/Modal/ModalView.tsx
+++ b/packages/modal/src/Modal/ModalView.tsx
@@ -108,16 +108,23 @@ const ModalView = React.forwardRef<HTMLDialogElement, ModalProps>(
           // @ts-ignore React17 - `onCancel` is unavailable in React 17 types
           onCancel={e => e.preventDefault()}
         >
-          {children}
-          <CloseButton
-            data-lgid={lgIds.close}
-            data-testid={lgIds.close}
-            closeIconColor={closeIconColor}
-            onClick={handleClose}
-          />
-          {/* Backdrop portal container for floating elements that need to escape dialog overflow */}
-          {open && dialogEl && (
-            <div className={portalContainerStyles} ref={setPortalContainerEl} />
+          {open && (
+            <>
+              {children}
+              <CloseButton
+                data-lgid={lgIds.close}
+                data-testid={lgIds.close}
+                closeIconColor={closeIconColor}
+                onClick={handleClose}
+              />
+              {/* Backdrop portal container for floating elements that need to escape dialog overflow */}
+              {dialogEl && (
+                <div
+                  className={portalContainerStyles}
+                  ref={setPortalContainerEl}
+                />
+              )}
+            </>
           )}
         </dialog>
       </LeafyGreenProvider>

From 263a63b03090e4ec88f7e84f4901f5c7d0b5250d Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 7 Oct 2025 08:34:47 -0700
Subject: [PATCH 2/3] chore(modal): changeset

---
 .changeset/two-dogs-smash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-dogs-smash.md

diff --git a/.changeset/two-dogs-smash.md b/.changeset/two-dogs-smash.md
new file mode 100644
index 0000000000..c6d4d342ae
--- /dev/null
+++ b/.changeset/two-dogs-smash.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/modal': patch
+---
+
+[LG-5601](https://jira.mongodb.org/browse/LG-5601) Fix regression where `Modal` children remained mounted when closed. Restores v19 behavior where children are conditionally rendered based on the `open` prop.

From 98ad0f9a921dd7dae47a29675eccc913f72cdbb4 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 7 Oct 2025 12:20:37 -0700
Subject: [PATCH 3/3] fix(modal): tests

---
 .../src/ConfirmationModal/ConfirmationModal.spec.tsx   | 10 +++++++---
 .../src/MarketingModal/MarketingModal.spec.tsx         |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index 803bee5336..4eb5609bdb 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -74,8 +74,8 @@ describe('packages/confirmation-modal', () => {
   });
 
   test('does not render if closed', () => {
-    const { getByText } = renderModal();
-    expect(getByText('Content text')).not.toBeVisible();
+    const { queryByText } = renderModal();
+    expect(queryByText('Content text')).toBeNull();
   });
 
   test('renders if open', () => {
@@ -329,6 +329,10 @@ describe('packages/confirmation-modal', () => {
             </ConfirmationModal>,
           );
 
+          const rerenderedConfirmationButton = await findByTestId(
+            lgIds.confirm,
+          );
+
           if (requiredInputText) {
             textInput = getByLabelText(
               `Type "${requiredInputText}" to confirm your action`,
@@ -336,7 +340,7 @@ describe('packages/confirmation-modal', () => {
             expect(textInput).toHaveValue('');
           }
 
-          expect(confirmationButton).toHaveAttribute(
+          expect(rerenderedConfirmationButton).toHaveAttribute(
             'aria-disabled',
             disabledAfterReopeningModal.toString(),
           );
diff --git a/packages/marketing-modal/src/MarketingModal/MarketingModal.spec.tsx b/packages/marketing-modal/src/MarketingModal/MarketingModal.spec.tsx
index bea688bf08..ad2dcdbd31 100644
--- a/packages/marketing-modal/src/MarketingModal/MarketingModal.spec.tsx
+++ b/packages/marketing-modal/src/MarketingModal/MarketingModal.spec.tsx
@@ -77,8 +77,8 @@ describe('packages/marketing-modal', () => {
     });
   });
   test('does not render if closed', () => {
-    const { getByText } = renderModal();
-    expect(getByText('Content text')).not.toBeVisible();
+    const { queryByText } = renderModal();
+    expect(queryByText('Content text')).toBeNull();
   });
 
   test('renders if open', () => {