React-beautiful-dnd: Dragged Item should stay with the cursor

[sidharthancr]

When working with conditional element that are removed before drag, the draggged element should stay with the mouse and the changes should be calculated based on the mouse position.

Expected behavior

Selected Draggable element stays with the mouse.

Actual behavior

Draggable element moves up

Steps to reproduce

Have some content in the draggable that does not show on being dragged

What version of React are you using?

16.12.0

What version of react-beautiful-dnd are you running?

^13.0.0

What browser are you using?

Chrome v83.0

Demo

https://codesandbox.io/s/naughty-currying-dp0fp

PS: The GIF is different from the demo because I have modified the top of the dragging element based on the mouse position. The Sandbox demo shows the behaviour out of the box

[nicubarbaros]

as stated in the docs. Its forbidden to update the dimensions after a drag ocures. So you will not have to remove on drag some components.

[sidharthancr]

as stated in the docs. Its forbidden to update the dimensions after a drag ocures. So you will not have to remove on drag some components.

As shown in the demo, I have done it on onBeforeDragCapture. The data is removed even before the drag starts. Anything we can do about this??

[nicubarbaros]

Ohh, to be fair I also tried to do it in onBeforeDragCapture (hide some droppable), but that did not work. Its either we donnot understand it, where we miss something.

[matheusAle]

I have a similar issue:
In my case I a using react-virtualized. and everything is inside an angular project.