From edff50238d06c2d2ad759f23edbd161c22df1ba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?=
 <jaroslaw.sadzinski@gmail.com>
Date: Mon, 27 Mar 2023 18:35:57 +0200
Subject: [PATCH] (core) Proper way to recreate collapsed section.

Summary: Fix for a bug with a collapsed custom widget, which doesn't work it is detached from a dom.

Test Plan: Added

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3835
---
 app/client/components/LayoutTray.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/client/components/LayoutTray.ts b/app/client/components/LayoutTray.ts
index 508bc19b..f91302b5 100644
--- a/app/client/components/LayoutTray.ts
+++ b/app/client/components/LayoutTray.ts
@@ -41,6 +41,7 @@ export class LayoutTray extends DisposableWithEvents {
   public active = Signal.create(this, false);
 
   private _rootElement: HTMLElement;
+
   constructor(public viewLayout: ViewLayout) {
     super();
     // Create a proxy for the LayoutEditor. It will mimic the same interface as CollapsedLeaf.
@@ -49,8 +50,6 @@ export class LayoutTray extends DisposableWithEvents {
     // Build layout using saved settings.
     this.layout.buildLayout(this.viewLayout.viewModel.collapsedSections.peek());
 
-
-
     this._registerCommands();
 
     // Override the drop event, to detect if we are dropped on the tray, and no one else
@@ -121,11 +120,7 @@ export class LayoutTray extends DisposableWithEvents {
     const section = Observable.create<number|null>(owner, null);
     owner.autoDispose(selected.addListener((cur, prev) => {
       if (prev && !cur) {
-        const vs = this.viewLayout.gristDoc.docModel.viewSections.getRowModel(prev);
-        const vi = vs.viewInstance.peek();
-        if (vi) {
-          detachNode(vi.viewPane);
-        }
+        this.layout.getBox(prev)?.recreate();
       }
       section.set(cur);
     }));
@@ -488,6 +483,10 @@ class CollapsedLayout extends Disposable {
     return this._boxes.get().map(l => l.id.get()).filter(x => x && typeof x === 'number');
   }
 
+  public getBox(leaf: number): CollapsedLeaf|undefined {
+    return this._boxes.get().find(l => l.id.get() === leaf) as CollapsedLeaf|undefined;
+  }
+
   public buildDom() {
     return (this.rootElement = cssLayout(
       testId('layout'),
@@ -641,6 +640,12 @@ class CollapsedLeaf extends Leaf implements Draggable, Dropped {
     });
   }
 
+  public recreate() {
+    const previous = this._hiddenViewInstance.get();
+    this._hiddenViewInstance.set(cssHidden(dom.maybe(this._viewInstance, view => view.viewPane)));
+    previous && dom.domDispose(previous);
+  }
+
   public buildDom() {
     this._content.set(this.model.buildContentDom(this.id.get()));
     return this.rootElement = cssBox(