Maintain scroll position post-drop

[alexreardon]

When dropping an item it is up to a consumer to update their state syncronously. However, this change can result in a shift in the scroll of the container / viewport that the user is interacting with. Ideally there would be no shift after a drop.

I have avoiding this until we do #27. That feature makes this very obvious. I have been hesitant to do this until now as it involves doing some post-drop work (potentially correcting scroll's) which we are not doing at this point. However, I think it is time.

[alexreardon]

Duplicate: #290

[alexreardon]

I can confirm that the scroll is shifted by the size of the dropped item. I am currently attempting to create a reproducible example and then i'll explore ways of getting around it

[alexreardon]

I have set up a little independent demo that has a list with changing items. Unable to replicate issue. I have been digging into React internals to see if it is doing some scroll magic

[alexreardon]

It turns out the issue is only occurring in Chrome. This got me thinking that it is probably not react.

It turns out the issue is caused by Chrome trying to be clever with Scroll Anchoring. To get around this permanently we will add this style (probably to a droppable)

overflow-anchor: none;

[alexreardon]

As a work around you can add the style for yourself in the meantime

[alexreardon]

Unfortunately to add this it will be a breaking change as we need to add a property to droppables 💥.

I will add a DroppableProps which will include a data attribute to be bound. This will allow us to control these type of non-visible style changes in the future (similar to how the Draggable works today)

[alexreardon]

Closed by #321

[mdodge-ecgrow]

FYI, for anyone coming here looking for answers. I have done something that doesn't look super great, it scrolls after that state is saved and scrolled to the top. And it is very hacky, but it does work to get the dropped item into focus at the top of the scroll container.
I stuck this code into my onDragEnd function.

// scroll the order into view
		const target = document.getElementById(theOrder.orderNumber);
		const whereToScroll =
			target.offsetTop -
			document.getElementById(destination.droppableId).offsetTop -
			55;
		setTimeout(() => {
			document.getElementById(
				destination.droppableId
			).scrollTop = whereToScroll;
		}, 5);

Edit: After doing some more research (aka googling), I have discovered a much simpler cleaner way to do this. Albeit still fairly hacky.
Toward the top of the onDragEnd function before I set the state causing the container to scroll to the top, I run this line saving the scroll position:

const savedScrollPos = document.getElementById(
	destination.droppableId
	).scrollTop;

Then toward the bottom right after saving the state, I do this:

setTimeout(() => {
			document.getElementById(
				destination.droppableId
			).scrollTop = savedScrollPos;
		}, 0);

So it is better, although, you can still see it go to the top, then go back to the original scroll position again. Very hacky, but it works!

[altmshfkgudtjr]

@mdodge-ecgrow
I have problem same as yours, and my solution is same too. Is there really any better way than this one? 😭😭😭