Bug: onStop returns wrong positions when using grid

[flashtheman]

When using grid, the x and y returned by onStop are incorrect. lastX and lastY however seem to be correct. I can't find a explanation for the values onStop returns for x and y.
I've created an example showing the behavior:

https://codesandbox.io/s/texthighlights-wtrzt

Please have a look at the console output when dragging the object around. I would have expected x and y to change based on the grid of [50,50] but this is not the case.

React-draggable is also used by react-rnd - they also have an issue open for this bug (bokuweb/react-rnd#453)

[jeffkillian]

Any update on whether anyone is looking into this? I'm experiencing this as well. Dragging to a grid is effectively broken as you can't guarantee that it will stay on that grid.

[jeffkillian]

For anybody who is also experiencing this, I've found an okay workaround.

1. Make the component controlled (by passing in a position={{x:state.x, y=state.y}})
2. Use onDragStop, and within that set the state's x and y to the lastX and lastY.

While users can still end a drag in the incorrect position, the view will immediately update after to the proper position.

[nicholaschiang]

Had the same issue and @jeffkillian's solution worked for me (though I'm not sure why this isn't the default behavior)!

[STRML]

Thanks for the report. I see two ways we can fix this:

1. Add the grid logic to onDragStop, or
2. Don't actually determine control position at all on drag stop, only allowing drag events to actually move the element.

2 is cleaner but I am not 100% sure it will not have side effects. Looking into it.

[andreas-soroko]

any updates on this?