PanelImperativeHandle.expand() do not expand to most recent size

[JohanPetersson]

As per https://react-resizable-panels.vercel.app/imperative-api/panel, expand() should restore the most recent size, but it seems that the current size is not persisted when collapse() is called. Or am I missing something? I know we can use conditional panels, but I just want to collapse some panels with an animation and keep their state.

What is the intended usage of expand() if it doesn't handle this?

Should we keep track of the size of each panel ourselves before collapsing them, and instead of calling expand() we call resize()?

This page https://react-resizable-panels.vercel.app/props/panel also says isExpanded() is available in PanelImperativeHandle, but that is not true.

[bvaughn]

but it seems that the current size is not persisted when collapse() is called.

Please share a repro.

[JohanPetersson]

import { Panel, Group, useDefaultLayout, usePanelRef } from 'react-resizable-panels'

export function Test() {
  const { defaultLayout, onLayoutChange } = useDefaultLayout({
    id: 'panels',
    storage: localStorage,
  })

  const panelRef = usePanelRef()

  const togglePanel = () => {
    const panel = panelRef.current
    if (panel) {
      panel.isCollapsed() ? panel.expand() : panel.collapse()
    }
  }

  return (
    <div>
      <button onClick={togglePanel}>Toggle Panel</button>

      <Group defaultLayout={defaultLayout} onLayoutChange={onLayoutChange}>
        <Panel id="panel1" defaultSize={30}>
          <div>Panel 1 Content</div>
        </Panel>
        <Panel id="panel2" defaultSize={70} collapsible panelRef={panelRef}>
          <div>Panel 2 Content</div>
        </Panel>
      </Group>
    </div>
  )
}

[JohanPetersson]

In version 3, I believe the collapse state was stored in the layout. Now, only the size is stored, and it becomes 0 when calling collapse().

[bvaughn]

Thanks for the repro.

This looks like a regression and an edge case.

• The regression: The library should remember the panel's most recent size before it was collapsed, in memory, and restore that when expand is called. Looks like I forgot to implement this fully.
• The edge case: If there is no in-memory size, the library should expand the panel to its minSize. The code you're provided shows an unexpected scenario: a collapsible panel with a minSize of 0. The library should probably handle this more gracefully, but I'm not sure why the panel is collapsible in this case. (It doesn't mean anything to "collapse" a panel if the panel can already be resized to 0 normally.)

This page https://react-resizable-panels.vercel.app/props/panel also says isExpanded() is available in PanelImperativeHandle, but that is not true.

Thanks. Updated.

[bvaughn]

Fix has been published in version 4.0.16

---

❤️ → ☕ givebrian.coffee