React-beautiful-dnd: Auto-scroll moves up constantly during horizontal dragging!
Bug or feature request?
Bug
Expected behavior
Scrolling horizontally should never activate vertical autoscroll, unless you actually try to scroll vertically.
Actual behavior
Scrolling horizontally instantly activates vertical autoscroll up (until the top of the page is reached) under certain circumstances.
Steps to reproduce
I actually can't figure out how to reproduce it normally but I did manage to get the exact same behaviour in this codesandbox.io, using the example as a basis and building in my own code.
I still couldn't reproduce it until I noticed that if you shrink the vertical width of the screen, it eventually starts happening. This goes to my theory that there is something going on in the autoscroll calculations, involving the height of various divs...
Make the window as small as in the below picture and then drag a card left or right. The screen will start moving up slowly.
What version of React are you using?
16.3.1
What version of react-beautiful-dnd are you running?
10.0.3
What browser are you using?
Chrome, latest version for Windows 10.
Demo
My demo is based on your boilerplate and another one that included SCSS support.
Again, make sure to shrink the screen enough (like in the above picture) and then start dragging.
However, in my actual code, I get the problem always, even with the browser window maximised. It's only that I couldn't figure out how to reproduce it in the code sandbox.
I can imagine that I am missing something necessary in the CSS, which is tripping up the autoscroll calculations but I can't find the problem... I'm hoping that this too small screen version I did find in the code sandbox is the same problem or at least related to mine.
matttk
All 13 comments
Hey @matttk, just want to let you know we'll look into this as soon as we can. Alex, the maintainer, will be back soon. For more info, see #1010.
treshugart
on 11 Jan 2019
Okay, so this has to do with how auto scrolling works. If you drag something near the edge of a browser, we will scroll the browser if it can be scrolled. This is true even when the movement is on any plane (vertical or horizontal).
In your posted example, i am not sure why the auto scroll only goes up and not also down as you move the item lower. This is worth looking into
alexreardon
on 23 Jan 2019
If you drag something near the edge of a browser, we will scroll the browser if it can be scrolled. This is true even when the movement is on any plane (vertical or horizontal).
But the scrolling starts the instant I pick up the item, not when I move it to the edge of the screen. Also, why would it just start auto-scrolling in any available direction (always up), even when you are not on the top edge?
matttk
on 23 Jan 2019
I'll take a deeper look @matttk
alexreardon
on 24 Jan 2019
This one is confusing. When I moved it onto my local everything worked as expected...
But there is an issue on the codesandbox one 馃
alexreardon
on 24 Jan 2019
Something strange going on. If I add this style it seems to work fine:
html, body {
width: 100%;
height: 100%;
}
This one is really hard to get right given there are so many ways a document can be setup 馃槻
alexreardon
on 24 Jan 2019
Something strange going on. If I add this style it seems to work fine:
html, body { width: 100%; height: 100%; }
I really thought I tried something like this but maybe I only applied it to the body or html... at any rate, this gets rid of the problem, even if it isn't really the solution. Thanks! :+1:
matttk
on 24 Jan 2019
I am working on a fix @matttk that will avoid you needing to add those styles
alexreardon
on 24 Jan 2019
I went a bit further, it actually has to do with the body / document behaviour differences between doctypes.
By adding the HTML5 doctype to your file everything should work fine
https://codesandbox.io/s/nk2k52xr3p
<!DOCTYPE html>
It could be worth calling this out in the docs
alexreardon
on 25 Jan 2019
your custom index.html in your codesandbox example did not have a doctype
alexreardon
on 25 Jan 2019
I have added a new doc section encouraging people to use the html5 doctype
alexreardon
on 25 Jan 2019
This issue has popped it's head up a few times in unexpected ways. I have added a dev only check to warn people if they are not using a html5 doctype
alexreardon
on 25 Jan 2019
Related issues
OmriAharon
路
3Comments
lukyth
路
3Comments
heymartinadams
路
3Comments
jasonlewicki
路
3Comments
vrg-success
路
3Comments
Most helpful comment
Something strange going on. If I add this style it seems to work fine: