diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx index abb12ce4..223c65c2 100644 --- a/packages/react-resizable-panels/src/PanelGroup.test.tsx +++ b/packages/react-resizable-panels/src/PanelGroup.test.tsx @@ -418,5 +418,26 @@ describe("PanelGroup", () => { ref.current?.setLayout([60, 80]); }); }); + + it("should warn about an empty layout", () => { + act(() => { + root.render( + + + + ); + }); + + // Since the layout is empty, no warning is expected (even though the sizes won't total 100%) + + act(() => { + root.render( + + ); + }); + }); }); }); diff --git a/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts b/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts index 4f2ee0ee..a2c6e39c 100644 --- a/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts +++ b/packages/react-resizable-panels/src/utils/validatePanelGroupLayout.ts @@ -25,7 +25,10 @@ export function validatePanelGroupLayout({ .map((size) => `${size}%`) .join(", ")}` ); - } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) { + } else if ( + !fuzzyNumbersEqual(nextLayoutTotalSize, 100) && + nextLayout.length > 0 + ) { // This is not ideal so we should warn about it, but it may be recoverable in some cases // (especially if the amount is small) if (isDevelopment) {