secondaryInitialSize sometimes won't work

[Allensy10]

I'm using the component with secondaryInitialSize={window.visualViewport.width - 356}. I also tried to set secondaryInitialSize={1000}. Most of the time it works just fine but sometimes the secondary get with value of 0 and the primary spreads on the entire screen.

Note: Those are the other props values I use:

<SplitterLayout primaryMinSize={isMobile ? 30 : 10} secondaryMinSize={500} secondaryInitialSize={window.visualViewport.width - 356} percentage={false}>

At the image you can see that the right container width is for some reason set to 0px.

[Saltallica]

same here

[nmandel]

I ran into a similar case, where secondaryMinSize was set, but the secondary panel still loaded with a width of 0. This only seemed to happen when the component was loaded within a portal. Below is a workaround (roughly based on this comment) that worked for my case. I wanted the secondary panel to start at half the width to match default functionality, but I imagine you could set secondaryPaneSize to whatever value you needed here.

const splitterRef = useRef(null);
useEffect(() => {
  if (splitterRef.current?.container?.offsetWidth > 0 && splitterRef.current?.state?.secondaryPaneSize === 0) {
    splitterRef.current.setState({ secondaryPaneSize: splitterRef.current.container.offsetWidth / 2 });
  }
}, [splitterRef.current]);

return (
  <SplitterLayout
    primaryMinSize={500}
    secondaryMinSize={500}
    ref={splitterRef}
  >
)