Seperator travels in opposite direction when dragging

[Chevindu]

Hi. I'm using your library in a fully client rendered app, noticed something weird. I use defaultLayout and onLayoutChanged props with useDefaultLayout hook. For the storage object, I have bound custom callbacks, that call an API endpoint. Main idea is to store the layout in the backend, and re-store the layout on subsequent logins.

I am not using conditional panels, but Right Panel in this example is collapsible.

react-resizable-panels-opposite-drag.mp4

Notice after a reload, the Seperator component seems to move in opposite direction to the cursor.

Following is a stripped down version of my component. I will try to spin up a minimal reproducible example, as this one includes some custom hooks. In the meantime, this might give you a hint of my approach.

export const SecondaryMarket = () => {
    const panelGroup1Storage = usePanelStorage("secondary_market_panel_group_1");

    const group1Layout = useDefaultLayout({
        id: "secondary_market_panel_group_1",
        panelIds: ['left-panel', 'right-panel'],
        storage: panelGroup1Storage
    });

    return <div>
        <Group
            id="secondary_market_panel_group_1"
            orientation="horizontal"
            defaultLayout={group1Layout.defaultLayout}
            onLayoutChange={(layout) => {
                console.log('$ onLayoutChange:', layout);
            }}
            onLayoutChanged={group1Layout.onLayoutChanged}
        >
            <Panel id="left-panel" className="left-panel">
                 <div>Left Panel</div>
            </Panel>

            <Separator className="resize-handle resize-handle-vertical" />

            <Panel id="right-panel" className="right-panel" collapsible={true} collapsedSize="35px" defaultSize="30%" minSize="20%">
                <div>Right Panel</div>
            </Panel>
        </Group>
    </div >;
}

I'm pretty sure this is a usage issue than a library issue. Will you be able to provide some hints on what should I be looking at? Please let me know if it's not possible to analyze without a working example.

Cheers and have a great day!

[bvaughn]

Interesting!

I'm not sure what would cause this 🤔 so a repro would be helpful. Here's a Code Sandbox you can fork to start: https://codesandbox.io/p/devbox/react-resizable-panels-forked-sfvylh

[Chevindu]

Thanks, I'll try to reproduce.

[bvaughn]

This is likely caused by the same issue being discussed on #656

[bvaughn]

Going to close this discussion thread. Let's roll the discussion into that issue

[bvaughn]

react-resizable-panels@4.6.2 has just been released with a fix for this issue.

---

❤️ → ☕ givebrian.coffee