An error occurred when try to open conditional panel hidden by resize

[valeriiyukov]

Since 4.7.0 this causes an error: Invalid 2 panel layout: 100%
Scenario: Resize conditional panel to hide it completely, then try to show it by changing state.
Code example: https://codesandbox.io/p/sandbox/competent-galileo-jvts35

[bvaughn]

Here is a trimmed down version of the Code Sandbox link that still triggers the error:

const [showPanel, setShowPanel] = useState(true);

return (
  <Group>
    {showPanel && (
      <Panel
        collapsible
        minSize={200}
        onResize={size => {
          if (size.asPercentage === 0) {
            setShowPanel(false);
          }
        }}
      >
        Collapsible
      </Panel>
    )}
    <Panel
      onClick={() => {
        setShowPanel(!showPanel);
      }}
    >
      {showPanel ? "Collapse" : "Expand"}
    </Panel>
  </Group>
);

What I've observed is that clicking the collapse/expand button works properly. If you collapse the panel manually though, the error occurs.

I'll try to find some time to look into it over the next few days. Feel free to take a look first if you've got some extra bandwidth though.

[bvaughn]

Can you tell me why you're conditionally-rendering the collapsed panel? (It's fine. That should work, but I'm still curious.)

In my experience, it's better to derive values like this than trying to mirror state; it's easy for mirrored state to get out of sync. In this case, I would suggest deriving the "is open" value, either from Panel size...

const [panelSize, setPanelSize] = useState<PanelSize | undefined>();
const isOpen = panelSize?.asPercentage !== 0;

...or from Group layout...

const [layout, setLayout] = useState<Layout | undefined>();
const isOpen = layout?.left !== 0;

For what it's worth, I've also generally found it more flexible to use the Group layout for this sort of thing, since you can always read/write the layout even if a conditionally rendered panel is not present (meaning that you couldn't interact with its ref).

If you don't need to conditionally-render the Panel, things would be a lot simpler. Your toggle function could just use this library methods directly, e.g.

const toggle = () => {
  const panel = panelRef.current;
  if (panel) {
    if (panel.isCollapsed()) {
      panel.expand();
    } else {
      panel.collapse();
    }
  }
};

I don't know your use case, but I would approach it like this:

const panelRef = usePanelRef();

const [panelSize, setPanelSize] = useState<PanelSize | undefined>();
const isOpen = panelSize?.asPercentage !== 0;

const toggle = () => {
  const panel = panelRef.current;
  if (panel) {
    if (panel.isCollapsed()) {
      panel.expand();
    } else {
      panel.collapse();
    }
  }
};

return (
  <>
    <button onClick={toggle}>{isOpen ? "Collapse" : "Expand"} left</button>
    <Group className=" max-h-15">
      <Panel
        collapsible
        minSize={200}
        onResize={setPanelSize}
        panelRef={panelRef}
      >
        Panel
      </Panel>
      <Panel>
        Right
      </Panel>
    </Group>
  </>
);

You could even use the isOpen prop to conditionally render different styles for the panel (e.g. to hide its border).

[bvaughn]

Handing this one back to you, @valeriiyukov, until you've shared a bit more info.

[bvaughn]

If this is important enough to get a response, I'll reopen it.