bug: fix rendering issue

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -11,6 +11,8 @@ import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
 import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
 import { DockviewComponent } from '../../../../dockview/dockviewComponent';
 import { OverlayRenderContainer } from '../../../../overlayRenderContainer';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
 
 class TestContentRenderer
     extends CompositeDisposable
@@ -26,6 +28,7 @@ class TestContentRenderer
     constructor(public id: string) {
         super();
         this.element = document.createElement('div');
+        this.element.id = id;
     }
 
     init(parameters: GroupPanelContentPartInitParameters): void {
@@ -146,4 +149,40 @@ describe('contentContainer', () => {
 
         disposable.dispose();
     });
+
+    test("that panels renderered as 'onlyWhenVisibile' are removed when closed", () => {
+        const cut = new ContentContainer(
+            fromPartial<DockviewComponent>({
+                overlayRenderContainer: {
+                    detatch: jest.fn(),
+                },
+            }),
+            fromPartial<DockviewGroupPanelModel>({})
+        );
+
+        const panel1 = fromPartial<IDockviewPanel>({
+            api: {
+                renderer: 'onlyWhenVisibile',
+            },
+            view: { content: new TestContentRenderer('panel_1') },
+        });
+
+        const panel2 = fromPartial<IDockviewPanel>({
+            api: {
+                renderer: 'onlyWhenVisibile',
+            },
+            view: { content: new TestContentRenderer('panel_2') },
+        });
+
+        cut.openPanel(panel1);
+
+        expect(panel1.view.content.element.parentElement).toBe(cut.element);
+        expect(cut.element.childNodes.length).toBe(1);
+
+        cut.openPanel(panel2);
+
+        expect(panel1.view.content.element.parentElement).toBeNull();
+        expect(panel2.view.content.element.parentElement).toBe(cut.element);
+        expect(cut.element.childNodes.length).toBe(1);
+    });
 });

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -203,11 +203,11 @@ export class ContentContainer
 
     public closePanel(): void {
         if (this.panel) {
-            if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
+            if (this.panel.api.renderer === 'onlyWhenVisibile') {
                 this._element.removeChild(this.panel.view.content.element);
             }
-            this.panel = undefined;
         }
+        this.panel = undefined;
     }
 
     public dispose(): void {

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -138,7 +138,6 @@ export class DockviewGroupPanelModel
 {
     private readonly tabsContainer: ITabsContainer;
     private readonly contentContainer: IContentContainer;
-    // private readonly dropTarget: Droptarget;
     private _activePanel: IDockviewPanel | undefined;
     private watermark?: IWatermarkRenderer;
     private _isGroupActive = false;
@@ -527,6 +526,7 @@ export class DockviewGroupPanelModel
             if (!skipSetGroupActive) {
                 this.accessor.doSetGroupActive(this.groupPanel);
             }
+            this.contentContainer.renderPanel(panel, { asActive: true });
             return;
         }
 

packages/docs/sandboxes/demo-dockview/src/app.tsx

@@ -14,8 +14,27 @@ import './app.scss';
 const components = {
     default: (props: IDockviewPanelProps<{ title: string }>) => {
         return (
-            <div style={{ height: '100%', overflow: 'auto', color: 'white' }}>
+            <div
-                {''}
+                style={{
+                    height: '100%',
+                    overflow: 'auto',
+                    color: 'white',
+                    position: 'relative',
+                }}
+            >
+                <span
+                    style={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%,-50%)',
+                        pointerEvents: 'none',
+                        fontSize: '42px',
+                        opacity: 0.5,
+                    }}
+                >
+                    {props.api.title}
+                </span>
             </div>
         );
     },