Dynamically added Panels

[andmar67]

I am using react-resizable-panel to dynamically create a page divided into rows, where each row can in turn contain other rows (for a number of times not known in advance).
The idea is that each row can be split in two by clicking a button that updates the state of my React component, and that this can be done as many times as desired.
I noticed that if I always split the first row, the panel resize works fine, but as soon as I try to split one of the other rows in two, the resize between the row I just created and the one before it works the other way around, i.e., if I try to shrink it, it gets wider and vice versa

This is the (working) equivalent structure to the one that dynamically constructed shows the problem:

    <PanelGroup direction="vertical">
      <Panel defaultSize={100}>
        <PanelGroup direction="vertical">
          <Panel> First Row </Panel>
          <PanelResizeHandle />
          <Panel>
            <PanelGroup direction="vertical">
              <Panel> Second row, first </Panel>
              <PanelResizeHandle />
              <Panel> Second row, second </Panel>
            </PanelGroup>
          </Panel>
        </PanelGroup>
      </Panel>
    </PanelGroup>

I understand that this is an extreme case of using react-resizable-panel, but maybe there's a solution that I haven't found so far

[bvaughn]

Try adding order props to all of your panels. For example, change what ou showed me above to:

<PanelGroup direction="vertical">
  <Panel defaultSize={100} order={1}>
    <PanelGroup direction="vertical">
      <Panel order={1}> First Row </Panel>
      <PanelResizeHandle />
      <Panel order={2}>
        <PanelGroup direction="vertical">
          <Panel order={1}> Second row, first </Panel>
          <PanelResizeHandle />
          <Panel order={2}> Second row, second </Panel>
        </PanelGroup>
      </Panel>
    </PanelGroup>
  </Panel>
</PanelGroup>

Does that change the behavior?

[andmar67]

Thanks, it seems to be the solution!!!