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 17e3e4f9f..63915751d 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': @@ -847,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); } }) );