React-beautiful-dnd: Dragging new item to bottom of scrollable container causes jank

[humphreybc]

Bug or feature request?

Either a bug or something currently unsupported in our implementation. Probably related to https://github.com/atlassian/react-beautiful-dnd/issues/131 and https://github.com/atlassian/react-beautiful-dnd/issues/338 although I'm not sure if it's a duplicate of either of these.

Expected behavior

Dragging a Draggable to the bottom of a scrollable Droppable container should grow the scrollable Droppable to accommodate the placeholder of the new item, even when there's something at the bottom like a create button. Here's an example of it working well in Trello:

Actual behavior

Dragging a Draggable to the bottom of a scrollable Droppable container causes the Droppable container to jank, as it tries to grow Droppable but the parent container does not grow, I think:

Steps to reproduce

Here's the relevant code. I'm not sure if this is a bug or a symptom of https://github.com/atlassian/react-beautiful-dnd/issues/131. Perhaps someone could point me in the right direction and we might be able to change our markup to work around the issue. Appreciate the help!

Browser version

Chrome 66.0.3359.181 on Mac OS X 10.13.4.

[dimitarnestorov]

Try this: https://gist.github.com/dimitarnestorov/b08b843c04bb4dd44b1ce5da59a5f995

From the readme (this section):

• provided.placeholder: This is used to create space in the Droppable as needed during a drag. This space is needed when a user is dragging over a list that is not the home list. Please be sure to put the placeholder inside of the component for which you have provided the ref. We need to increase the size of the Droppable itself. This is different from Draggable where the placeholder needs to be a sibling to the draggable node.

[humphreybc]

Thanks @dimitarnestorov – we got confused by the 7.0.0 changelog which says:

We no longer require you to insert a sibling placeholder element for a Draggable

[humphreybc]

@dimitarnestorov cloneElement only works with elements, and placeholder is a ReactNode. Is there a reason why you're using cloneElement? Because this also seems to get the desired behavior:

children.push(placeholder);
return children;

While adding the placeholder fixes the janky scroll problem, there are still two more issues related to the placeholder and scrollable containers:

1. The placeholder does not expand the container when dragging an item into an empty container.
2. Dragging an item to the end of the list is difficult because there appears to be a tiny drop zone.

Both problems can be seen in this gif:

Are these duplicates of outstanding issues, or should I open new ones?

[dimitarnestorov]

Blind coding is the general reason.
Don't you get the warning: "every element in an array should have a key"? Probably not because it's a node.

[humphreybc]

Blind coding is the general reason.

Fair enough! 😀

Don't you get the warning: "every element in an array should have a key"? Probably not because it's a node.

Yeah, I think because they're nodes it's okay.

[alexreardon]

@humphreybc, the droppable is not expanding as I expect you have no put a minimum height on it. If it has a height of 0 then the user will never be able to drag over it

[alexreardon]

Is there anything outstanding here? Was the issue that the placeholder was not being added?

[humphreybc]

@alexreardon Yep, the issue was the placeholder not being added. Do you have any thoughts on the two issues I mentioned in this comment?

The placeholder does not expand the container when dragging an item into an empty container.
Dragging an item to the end of the list is difficult because there appears to be a tiny drop zone.

Not sure if I should open new issues.

[alexreardon]

Feel free to. I think both of those things should be working, but if they
are not then I can take a further look
On Wed, 6 Jun 2018 at 9:57 pm, Benjamin Humphrey [e-mail]
wrote:

@alexreardon https://github.com/alexreardon Yep, the issue was the
placeholder not being added. Do you have any thoughts on the two issues I
mentioned in this comment
https://github.com/atlassian/react-beautiful-dnd/issues/533#issuecomment-393729541
?

The placeholder does not expand the container when dragging an item into
an empty container.
Dragging an item to the end of the list is difficult because there appears
to be a tiny drop zone.

Not sure if I should open new issues.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/533#issuecomment-395043256,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7VG7faRRR5iJU8uL5K3PBTpzJoaTks5t58O6gaJpZM4UUYyY
.

[alexreardon]

I will close this issue. Please create other ones if things are not working how you would expect @humphreybc. I am happy to look into it further.