Window resize issue with Controlled component

[dumaixx]

Describe the bug

Hey
When using react-split-pane (v3) in controlled mode (sizes stored in React state), the panels visually resize when the browser window (or container) is resized, while the component state (sizes array) remains unchanged. This differs from the demo example which shows “fixed” pixel sizes unless the user drags the divider. It was working correctly with the version 0.1.x

To Reproduce

Steps to reproduce the behavior:

1. Go to sandbox example
2. Resize the preview window
   2.1 Locally openning devTools and resizig window step is valid

Expected behavior

Left and Right Pane should not change their width

Environment

• react-split-pane version: 3.0.4
• React version: 18/19
• Browser: Chrome/Edge
• OS: Windows 11

Additional context

It's strange that your example here is working fine here
I've copied in my example exact code of styles and Controlled component example and it's not working the same, could not find differences
Min/max width is also ignored this case, I've tried to add them in style prop of Pane's, they start working, but after playing with window width and started resizing - calculation is broken, right pane starts to go under left one if I will drag divider too far

Thanks in advance

[tomkp]

Thanks for the detailed report and reproduction.

I've investigated this and confirmed the issue. When using controlled mode with pixel sizes, the panes are incorrectly scaled proportionally when the container/window resizes, instead of maintaining their controlled sizes.

Root cause: In SplitPane.tsx, the handleContainerSizeChange function unconditionally applies proportional distribution via distributeSizes() when the container resizes, without checking if panes are in controlled mode.

Expected behavior: In controlled mode with pixel values (e.g., size={200}), panes should maintain their exact sizes when the container resizes.

Working on a fix now.

[tomkp]

Why the demo appears to work:

The demo at tomkp.github.io likely appears to work because:

1. The SplitPane container has a fixed layout structure (.example-content with flex: 1 inside a overflow: hidden parent), which may limit how much the container actually resizes
2. There IS a sync effect that attempts to restore controlled sizes, but it runs as a React effect (after render), causing a potential "flash" of incorrect sizes before correction
3. The flash may be too brief to notice in some scenarios, or the container resize may be small enough that the proportional change isn't visually obvious

The real issue is in handleContainerSizeChange - it unconditionally calls distributeSizes() when the container resizes, ignoring controlled size props. While the sync effect tries to correct this, it causes:

• Unnecessary re-renders (performance hit)
• A potential visual flash of incorrect sizes
• Race conditions in fast resize scenarios

[tomkp]

Fixed in PR #869

This issue has been fixed and merged. Here's a detailed explanation:

The Problem

When using controlled mode with pixel sizes (e.g., <Pane size={200}>), the panes were incorrectly scaled proportionally when the browser window or container resized. The state in your React component ([200, 400]) stayed the same, but the visual sizes changed.

Root Cause

In SplitPane.tsx, the handleContainerSizeChange function was unconditionally calling distributeSizes() when the container resized:

// Old code - always scaled proportionally
if (prevSize > 0 && prevSize !== newContainerSize) {
  return distributeSizes(currentSizes, newContainerSize);
}

This scaled all panes proportionally, ignoring the controlled size props. There was a sync effect that tried to restore the correct sizes, but this caused:

• Unnecessary re-renders
• A visual "flash" of incorrect sizes
• Potential race conditions during fast resize events

The Fix

The fix adds a check for controlled size props:

// New code - respects controlled sizes
const hasControlledSizes = paneConfigs.some(
  (config) => config.size !== undefined
);

if (prevSize > 0 && prevSize !== newContainerSize) {
  if (hasControlledSizes) {
    // Recalculate from props to maintain fixed pixel sizes
    return calculateInitialSizes(newContainerSize);
  }
  // Only uncontrolled panes scale proportionally
  return distributeSizes(currentSizes, newContainerSize);
}

Behavior Summary

Mode	On Window Resize
Controlled (size={200})	Maintains fixed pixel size
Uncontrolled (defaultSize={200})	Scales proportionally

Upgrade

This fix is available in the next release. You can also install directly from the master branch if needed.

Thanks for the detailed bug report and reproduction!

[dumaixx]

@tomkp Thanks! That was quick :) Is it possible to release now or is it possible to say when it will be released?

[tomkp]

@dumaixx I've just published v3.0.5

Hope this fixes your problem - let me know if you have any problems / reopen the issue.

https://github.com/tomkp/react-split-pane/releases/tag/v3.0.5

[dumaixx]

@tomkp Works perfectly fine, as well as with usePersistence too, thanks !