Mouse Movement in Opposite Direction When Dragging Resize Handle and having parameter hidden

[breathTake]

I have this problem, i have two panels, but one of them should only be rendered on a min. Screensize. Therefore I want to hide the panel and resize handler.

In here, the resize handler moves in the opposite direction of my mouse on drag.

Then i tried putting it out of the conditional render and simply give it the hidden attribute, but the same thing happens

{isPanelVisible && (
       <Panel defaultSize={30} minSize={15} maxSize={50}> //Panel 1
           <Box display={["none", "none", "revert"]} >
              ....
           </Box>
      </Panel>
      <PanelResizeHandle /> //Here
)}
<PanelResizeHandle hidden={!isPanelVisible} /> //Or here

<Panel defaultSize={70} minSize={50} maxSize={85}> //Panel 2
   ...
</Panel>

[breathTake]

I noticed, that this only happens when the Handle was hidden and i resize the window, so that it will be visible again.

When i normally start the app, and the handle is visible from the beginning, it works normally

[bvaughn]

Check out the FAQs: https://github.com/bvaughn/react-resizable-panels?tab=readme-ov-file#how-can-i-fix-layoutsizing-problems-with-conditionally-rendered-panels

Looks like your "Panel 1" should have an id prop and both panels should have an order prop. I would expect there to be warnings about this in the console in DEV mode (maybe you missed them?)

[breathTake]

You are absolutely right! Thanks for the fast help :)