Issue with conditionally rendered Panels

[Meeeeez]

Hello!

I am using Next.js and this is a simplified version of my layout.tsx:

<ResizableGroup>
      <ResizablePanel order={1] />
      <ResizableHandle withHandle />
      {children}
</ResizableGroup>

In my Page.tsx i have:

<ResizablePanel order={2} />
{isSelected && (
  <>
    <ResizableHandle withHandle />
    <ResizablePanel id='card-display' order={3} defaultSize={30} minSize={30} maxSize={45}>
         <CardDisplay mail={selectedCard} setSelected={setSelectedCard} />
    </ResizablePanel>
  </>
)}

My third ResizablePanel is rendered by default, but whenever isSeleced is false and the Panel is not rendered and I try to resize the first Panel I am getting an Error and the first panel flickers shortly.

This is the Error I am getting:
Uncaught Error: Assertion failed!
at assert (react-resizable-panels.browser.development.esm.js:452:15)
at eval (react-resizable-panels.browser.development.esm.js:1016:9)
at Array.forEach ()
at callPanelCallbacks (react-resizable-panels.browser.development.esm.js:1014:12)
at resizeHandler (react-resizable-panels.browser.development.esm.js:1625:17)
at setResizeHandlerState (react-resizable-panels.browser.development.esm.js:1920:25)
at eval (react-resizable-panels.browser.development.esm.js:316:13)
at Array.forEach ()
at HTMLBodyElement.handlePointerMove (react-resizable-panels.browser.development.esm.js:314:29)

[bvaughn]

@Meeeeez Can you please share a repro? Either something I can run on Code Sandbox and see the bug directly, or a recording of it made with Replay.

I don't even know what version of the library you're using nor what the error you're referring corresponds to. I need the full app to trouble shoot.

[Meeeeez]

Hello! Here is my repo: https://github.com/Meeeeez/quarter-apps
Run it like this:
pnpm i
pnpm dev:lc

Then select one of the emails on the screen so that the resizable panel is filled with some content. Next, click on the 'X' on the top left of the resizable panel which will make it dissapear. Next try to resize the navbar. You will se a flicker of the navbar and an error in the browser console.

[Meeeeez]

Nevermind! I figured it out. Here is what I did if anyone is encountering similar problems:

I wrapped the children in layout.tsx in another resizable panel and wrapped my content in page.tsx in a resizablepanel group.

Layout.tsx:

<ResizableGroup>
      <ResizablePanel id="nav" order={1] />
      <ResizableHandle withHandle />
      <ResizablePanel id="content" order={2] />
            {children}
      <ResizablePanel />
</ResizableGroup>

Page.tsx:

<ResizablePanelGroup>
     <ResizablePanel id="" order={1} />
     {isSelected && (
       <>
         <ResizableHandle withHandle />
         <ResizablePanel id='card-display' order={2} defaultSize={30} minSize={30} maxSize={45}>
              <CardDisplay mail={selectedCard} setSelected={setSelectedCard} />
         </ResizablePanel>
       </>
     )}
<ResizablePanelGroup />

[bvaughn]

Glad you got it sorted out! :)