Description
This issue is a copy of react-grid-layout/react-resizable#38 because it looks like the root cause is something within this library.
I have a resizable div which is float: right. The handler is on the left side. Everything works fine when the handler is on the right side but I'm having some troubles with the one on the right.
The following gif shows two screens. One, where the resizable is floating left and one where it's floating right. The floating left example is included to show you that it generally works.
After some debugging and seeing that it works fine if I scale the inner element only, I believe that the issue is caused because the origin of the element wrapping resizeable (which is top left I guess?) changes:
In pseudocode, the react structure of the borken example is:
<div width="123px" float="right">
<ReactResizable>
<children />
</ReactResizable>
</div>The react structure of the example without jumping is:
<div float="right">
<ReactResizable>
<div width="123px">
<children />
</div>
</ReactResizable>
</div>In the first case, <ReactResizable> changes the position of the top left corner, which might have something to do with the jumping. In the second, the position of <ReactResizable> stays the same while the right side of the <div> is being changed.
I believe that the root cause for this issue is this library (react-draggable), because:
deltaX in resizeHandler is jumping around between negative and positive values when the issue occurs:
This does not happen when dragging an object on the right side, which is working fine:
resizeHandler is a DraggableEventHandler, so the wrong values are originating somewhere here.