Fix conditional layout edge case

bvaughn · Feb 24, 2024 · 8f5de21 · 8f5de21
1 parent 61c06ba
commit 8f5de21
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx
@@ -130,6 +130,35 @@ describe("PanelGroup", () => {
     expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
   });
 
+  // github.com/bvaughn/react-resizable-panels/issues/303
+  it("should recalculate layout after panels are changed", () => {
+    let mostRecentLayout: number[] | null = null;
+
+    const onLayout = (layout: number[]) => {
+      mostRecentLayout = layout;
+    };
+
+    act(() => {
+      root.render(
+        <PanelGroup direction="vertical" onLayout={onLayout}>
+          <Panel id="foo" minSize={30} order={0} />
+          <PanelResizeHandle />
+          <Panel id="bar" minSize={70} order={1} />
+        </PanelGroup>
+      );
+    });
+    expect(mostRecentLayout).toEqual([30, 70]);
+
+    act(() => {
+      root.render(
+        <PanelGroup direction="vertical" onLayout={onLayout}>
+          <Panel id="bar" minSize={70} order={0} />
+        </PanelGroup>
+      );
+    });
+    expect(mostRecentLayout).toEqual([100]);
+  });
+
   describe("imperative handle API", () => {
     it("should report the most recently rendered group id", () => {
       const ref = createRef<ImperativePanelGroupHandle>();

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -768,10 +768,10 @@ function PanelGroupWithForwardedRef({
         panelData,
         layout
       );
-      assert(
-        prevPanelSize != null,
-        `Previous panel size not found for panel "${panelData.id}"`
-      );
+      if (prevPanelSize == null) {
+        // It's possible that the panels in this group have changed since the last render
+        return;
+      }
 
       if (
         prevCollapsible &&