From 6b5c17895350be83a6f8cbc34413e464f9daac8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?=
 <jaroslaw.sadzinski@gmail.com>
Date: Tue, 28 Mar 2023 17:13:33 +0200
Subject: [PATCH] (core) Fixing bug with type change when a collapsed section
 is maximized

Summary:
Changing type of a collapsed widget didn't work. It was grabbed
by the collapsed dom to soon.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: georgegevoian

Differential Revision: https://phab.getgrist.com/D3839
---
 app/client/components/LayoutTray.ts | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/client/components/LayoutTray.ts b/app/client/components/LayoutTray.ts
index f91302b5..e6f49367 100644
--- a/app/client/components/LayoutTray.ts
+++ b/app/client/components/LayoutTray.ts
@@ -119,8 +119,11 @@ export class LayoutTray extends DisposableWithEvents {
   public buildPopup(owner: IDisposableOwner, selected: Observable<number|null>, close: () => void) {
     const section = Observable.create<number|null>(owner, null);
     owner.autoDispose(selected.addListener((cur, prev) => {
-      if (prev && !cur) {
-        this.layout.getBox(prev)?.recreate();
+      if (prev) {
+        this.layout.getBox(prev)?.attach();
+      }
+      if (cur) {
+        this.layout.getBox(cur)?.detach();
       }
       section.set(cur);
     }));
@@ -623,6 +626,11 @@ class CollapsedLeaf extends Leaf implements Draggable, Dropped {
 
   // Helper to keeping track of the index of the leaf in the layout.
   private _indexWhenDragged = 0;
+
+  // A helper variable that indicates that this section is in a popup, and we should
+  // make any attempt to grab it and attach to our dom. Note: this is not a computed variable.
+  private _detached = false;
+
   constructor(protected model: LayoutTray, id: number) {
     super();
     this.id.set(id);
@@ -633,16 +641,21 @@ class CollapsedLeaf extends Leaf implements Draggable, Dropped {
       const instance = use(view.viewInstance);
       return instance;
     });
-    this._hiddenViewInstance.set(cssHidden(dom.maybe(this._viewInstance, view => view.viewPane)));
+    this._buildHidden();
     this.onDispose(() => {
       const instance = this._hiddenViewInstance.get();
       instance && dom.domDispose(instance);
     });
   }
 
-  public recreate() {
+  public detach() {
+    this._detached = true;
+  }
+
+  public attach() {
+    this._detached = false;
     const previous = this._hiddenViewInstance.get();
-    this._hiddenViewInstance.set(cssHidden(dom.maybe(this._viewInstance, view => view.viewPane)));
+    this._buildHidden();
     previous && dom.domDispose(previous);
   }
 
@@ -725,6 +738,12 @@ class CollapsedLeaf extends Leaf implements Draggable, Dropped {
   public leafId() {
     return this.id.get();
   }
+
+  private _buildHidden() {
+    this._hiddenViewInstance.set(cssHidden(dom.maybe(this._viewInstance, view => {
+      return this._detached ? null : view.viewPane;
+    })));
+  }
 }
 
 /**