How to setup minSize, maxSize, defaultSize dynamic.

[keval-key]

How to setup minSize, defaultSize dynamic. I may don't know proper issue but you check demo by below link.

How to Reproduce issue?

• Open Link: https://codesandbox.io/p/sandbox/56q8ws
• 1st open left panel
• 2nd open right panel
• 3rd close left panel
• 4th open left panel and then you may see error.

  Error:

  Error
  Previous layout not found for panel index 2

  Video:

  https://github.com/user-attachments/assets/02bc57d3-880e-46f9-b848-95ee794e7dda

[bvaughn]

Hmm. I'm not sure what's causing this error but it seems like it's related to the min/max constraints. (Removing theme causes the error to go away.)

[keval-key]

Yes, @bvaughn. But is there any way to make it dynamic? The reason for using dynamic elements is that I want to make it responsive. BTW Thank you so much for your quick reply.

[bvaughn]

What you're doing should work. I don't know why it doesn't. Probably a bug in this library.

[keval-key]

Oh I see

[keval-key]

If you can help solve this issue, it would be greatly appreciated.

[Anuovec]

I encountered the same issue, I tried looking into it. It seems this code is causing the issue: https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/src/Panel.ts#L183 Without it, it works as expected.

The comment says that it is only for pixel-based constants, is it needed in some cases?

[bvaughn]

The comment says that it is only for pixel-based constants, is it needed in some cases?

That's a scenario in which I think the check is useful, but not the only one. I suspect this is a symptom of the bug but...the underlying bug is maybe somewhere else?

[Anuovec]

It seems the issue only occurs, when constraints are changed for the middle panel and at the same time a new left panel is being added.

[bvaughn]

It seems the issue only occurs, when constraints are changed for the middle panel and at the same time a new left panel is being added.

I wonder if changing the panel id in this scenario might work around the bug?

[igortas]

@bvaughn I like also more examples with dynamic values, I tend to use this library in a way where, I have one fully expanded resizable panel, after that, I can open one or two more panels dynamically and I can toggle them on and off, or hide some of them completely, so playing around with dynamic values it's bit problematic, is there a way, where values works out of the box and I can just provide how much panels I like at any given time(including toggled on/off panel)

[igortas]

@bvaughn still this one is opened, so I like to point out, issues with toggling split panes. After I initially set some panes, and I like one of the panes to be still visible, but toggled (make smaller width of the pane dynamically, when is in toggled state), nothing happens (width of the toggled pane is not changed), even I'm setting some of the options, min, max, default... Workng with the panes in dynamic environment, is not easy and also laggish....

Having default configuration like this, and changing isToggle to true and in the same time applying size, nothing really works... Also when I'm playing with the toggle state, and I need to expand/collapse, ti's laggish, like component was unmounted in collapsed state (interesting fact is that, even Collapse component from mui not working, which not umounting the children on collapse). I can't override flex functionality...

const panes = [
    {
        name: 'Pane 1',
        defaultSize: 15,
        minSize: 13,
        maxSize: 15,
        isToggled: false,
        isVisible: true
    },
    {
        name: 'Pane 2',
        defaultSize: 80,
        isToggled: false,
        isVisible: true
    },
    {
        name: ' Pane 3',
        defaultSize: 50,
        minSize: 25,
        maxSize: 50,
        isToggled: false,
        isVisible: false
    }
];

    <ResizePanelGroup direction='horizontal'>
            {visiblePanes.map((pane, index) => {
                const child = visibleChildrens[index];
                return (
                    <Fragment key={pane.name}>
                        <StyledPanel
                            id={pane.name}
                            order={index}
                            defaultSize={pane.defaultSize}
                            minSize={pane.minSize}
                            maxSize={pane.maxSize}
                        >
                            {child}
                        </StyledPanel>

                        {index < visibleChildrens.length - 1 && (
                            <StyledPanelResizeHandle
                            />
                        )}
                    </Fragment>
                );
            })}
        </ResizePanelGroup>

[keval-key]

It seems the issue only occurs, when constraints are changed for the middle panel and at the same time a new left panel is being added.

I wonder if changing the panel id in this scenario might work around the bug?

Oh yes, dynamic ID is a workaround solution for this.