From 4d01d4e0afa99ed2cc6772d5b85b2c952421635a Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 22 Dec 2024 18:47:09 +0000
Subject: [PATCH 1/2] chore: adjust dockview disposable

---
 packages/dockview-core/src/dockview/dockviewComponent.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 17e3e4f9f..c032abc6e 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -577,11 +577,6 @@ export class DockviewComponent
         this.updateWatermark();
     }
 
-    override dispose(): void {
-        this.clear(); // explicitly clear the layout before cleaning up
-        super.dispose();
-    }
-
     override setVisible(panel: DockviewGroupPanel, visible: boolean): void {
         switch (panel.api.location.type) {
             case 'grid':

From 296b49180e999af48f0674a61f5e8875cd94d2fe Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 22 Dec 2024 18:55:10 +0000
Subject: [PATCH 2/2] bug: fix overlay container for popout to floating

---
 .../dockview/dockviewComponent.spec.ts        | 23 ++++++++++++++++++-
 .../src/dockview/dockviewComponent.ts         | 17 +++++++-------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index 01c650d4f..2c4f09c10 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -5052,8 +5052,13 @@ describe('dockviewComponent', () => {
                 component: 'default',
             });
 
-            await dockview.addPopoutGroup(panel2);
+            const panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                renderer: 'always',
+            });
 
+            await dockview.addPopoutGroup(panel2);
             panel2.api.moveTo({ group: panel1.api.group, position: 'right' });
 
             // confirm panel is rendered on DOM
@@ -5062,6 +5067,22 @@ describe('dockviewComponent', () => {
                     '.dv-content-container > .testpanel-panel_2'
                 ).length
             ).toBe(1);
+
+            await dockview.addPopoutGroup(panel3);
+            panel3.api.moveTo({ group: panel1.api.group, position: 'right' });
+
+            // confirm panel is rendered to always overlay container
+            expect(
+                dockview.element.querySelectorAll(
+                    '.dv-render-overlay > .testpanel-panel_3'
+                ).length
+            ).toBe(1);
+            expect(
+                panel2.group.element.querySelectorAll(
+                    '.dv-content-container > .testpanel-panel_3'
+                ).length
+            ).toBe(0);
+            expect(dockview.element);
         });
 
         test('move popout group of 1 panel inside grid', async () => {
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index c032abc6e..63915751d 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -842,32 +842,31 @@ export class DockviewComponent
                                 });
                             }
                         } else if (this.getPanel(group.id)) {
-                            const removedGroup = group;
+                            group.model.renderContainer =
+                                this.overlayRenderContainer;
+                            returnedGroup = group;
 
                             if (floatingBox) {
-                                this.addFloatingGroup(removedGroup, {
+                                this.addFloatingGroup(group, {
                                     height: floatingBox.height,
                                     width: floatingBox.width,
                                     position: floatingBox,
                                 });
                             } else {
-                                this.doRemoveGroup(removedGroup, {
+                                this.doRemoveGroup(group, {
                                     skipDispose: true,
                                     skipActive: true,
                                     skipPopoutReturn: true,
                                 });
 
-                                removedGroup.model.renderContainer =
-                                    this.overlayRenderContainer;
-                                removedGroup.model.location = { type: 'grid' };
-                                returnedGroup = removedGroup;
+                                group.model.location = { type: 'grid' };
 
                                 this.movingLock(() => {
                                     // suppress group add events since the group already exists
-                                    this.doAddGroup(removedGroup, [0]);
+                                    this.doAddGroup(group, [0]);
                                 });
                             }
-                            this.doSetGroupAndPanelActive(removedGroup);
+                            this.doSetGroupAndPanelActive(group);
                         }
                     })
                 );