React-beautiful-dnd: Could not find required context

[dovydaskukalis]

Starting from 11.0.0, if <Draggable> is not inside <Droppable>, it throws Invariant failed: Could not find required context even when <Draggable> is disabled. Is it intended behaviour? As I remember it was always working fine and I didn't see anything mentioned in release notes.

Demo: https://codesandbox.io/s/km9zl2yyj3

[claycoleman]

If nothing else, maybe some additional error text here would be really useful. Maybe: "All Draggables must be rendered inside of a Droppable."

[alexreardon]

This behaviour has not changed from 10.x (or ~1.x?). Draggables must always be in a Droppable

"<Draggable /> components can be dragged around and dropped onto <Droppable />s. A <Draggable /> must always be contained within a <Droppable />."

It is in the first sentence of the Draggable docs 🚀

[alexreardon]

I am not sure if we could add more clarity 🤷‍♀️

[peisenmann]

It's a bit of a wall of text at the top of those docs. It'd probably be best to feature the <Droppable> somewhere in at least one of the examples on the page. Seeing the nested structure would do a lot more than saying it in the text wall.

I don't know that anything can really be done about the missing context message, as that comes from React itself.

[alexreardon]

Perhaps I could add a bigger warning at the top? This is also this gif at the root:

https://github.com/atlassian/react-beautiful-dnd#api-%EF%B8%8F

[peisenmann]

@alexreardon I certainly do appreciate the gif. I think the challenge comes from logically thinking that I might want to place draggables in a container that isn't itself ever droppable. Imagine a palette of options one might drag from onto a canvas, but would never consider dropping anything onto that palette.

The gif alone doesn't convey that a Draggable MUST be contained inside a Droppable, only that it should be if you want to rearrange items.

It's a one-time lesson that users have to learn, so maybe the existing docs are not worth altering.

[lwhite1]

I might want to place draggables in a container that isn't itself ever droppable. Imagine a palette of options one might drag from onto a canvas, but would never consider dropping anything onto that palette.

This is exactly my use-case. My palette is divided into "trays". I'm considering trying to make every tray a non-functioning droppable. Is that the best workaround for this?