Cannot handle keyboard movement event if direction is not provided

[nmain]

Bug or feature request?

Bug

Expected behavior

Keyboard movement works

Actual behavior

In some cases, Keyboard movement does not work

Steps to reproduce

On the official storybook demo, go to the Single Horizontal List simple example.
Make the page too narrow to fit the entire list on the page.
Scroll all the way to the right, and focus any item that's entirely outside of the "blue" now.
Try to use keyboard dragging to move that item, and you'll get this error.

Browser version

Chrome 65

Demo

https://react-beautiful-dnd.netlify.com/?selectedKind=single%20horizontal%20list&selectedStory=simple%20example&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel

[alexreardon]

Having content that is wider than the window is not handled super well by browsers. It does not overflow in the same way that content does vertically (which it does by adding a scroll to the body). The reason you are seeing the issue is because we never allow a keyboard drag to go outside of a droppable. In this case the draggable starts outside of the droppable and when you try to move it we error out as you are not inside a list.

How can you work around this?

Do not let draggable's be outside of a Droppable!

You can do this by:

• Making your Droppable use display: inline-flex rather than display:flex. This has different overflow rules to standard flex and will let your list scale beyond the width of the browser
• Put an overflow: auto on your list so that it becomes a scroll container when it runs out of room

Let me know how you go!

[alexreardon]

I think it would be worth calling out this browser behaviour in the docs to avoid people falling into this problem in the future

[nmain]

I see. I originally encountered this error in my own code. When investigating it, I found the same error message in one of the storyboard examples, and so I assumed they were the same issue and used that as my reproducing case. However, reading your feedback I think they must be unrelated.

I've created a reproducing case of exactly what I saw. Pardon the messiness; the code was brutally ripped from a larger program where parts of it make more sense than they do here. I can clean up / simplify it more if needed.

https://codesandbox.io/s/qlxpwkl2xw

Move all of the items from the top list to the bottom list in any manner, and then try to use the keyboard to move an item from the bottom list back to the top list. You'll get the error message "Cannot handle keyboard movement event if direction is not provided", but draggables are not overflowing outside of their droppable.

[nmain]

@alexreardon just making sure this doesn't get buried: Should I open a new issue with my reproducing case, since even though it's the same error message, it seems to be happening for a different reason?