Draggable with margins lands in the wrong place, sometimes

[abettadapur]

First, fantastic library, so far a real joy to use. Thanks for contributing this!

Bug or feature request?

Bug

Description

I have margins on my Draggable elements to space them apart.

With these margins set, when I drop a card, I sometimes see cards move to the wrong place. It is only for specific Droppable components. See the gif below. Notice that the second cell always places it in the correct place, but the others do not

I thought this might be margin collapsing, but I was further confused by the fact that the card seems to ignore the horizontal margins as well

I was able to fix this behavior by making the Draggable have no margins and instead have an inner div with the margins.

To me this seems like unexpected behavior, or at least something that could be documented. What are your thoughts?

Expected behavior

The Draggable should be aware of its margins and move appropriately

What version of React are you using?

16.4

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

Latest (9.0.2)

[alexreardon]

Your example looks great! It looks like our drop position is not correctly considering margins when moving into the last position of a foreign list. I can try to look a bit further into this one

[abettadapur]

Thanks @alexreardon, let me know if you need more from my end

[alexreardon]

An independent example would be very helpful. Here is our boilerplate:

https://codesandbox.io/s/k260nyxq9v

[alexreardon]

I think I have the right line, but it would be good to get an example to verify

[abettadapur]

Sure, I'll try to put one together for you tomorrow

[abettadapur]

@alexreardon, reliable repro. Your suspicion was right, it only occurs when the item is dropped at the end of the list
https://codesandbox.io/s/7jmqpljpq1

[alexreardon]

This led me down quite the rabbit hole 🐇

I was already wrestling with this area of the code for #511. As a result of that work, and this bug - I have completely changed how we do positioning with keyboard. My work fixes the issue you are seeing.

It will be shipping as a part of #719 in version 10.

Thanks so much for raising this.

Here is the fix in action:

[abettadapur]

Fantastic @alexreardon, thanks so much for the quick turnaround. Glad I could help :)

[alexreardon]

@abettadapur please give version 10 a go and see if your issues are resolved #838