Nested Drag and Drop

[jloleysens]

Using the EUI drag and drop component with nested droppables & draggables currently does not work. See the following sandbox for information on the versions and behaviour of nested drag and drop:

https://codesandbox.io/s/eui-nested-drag-and-drop-tdv3b?file=/src/App.tsx

EDIT: particularly when moving nested draggables into / out of parent components or into child components.

It would be ideal if we could get this kind of behaviour: https://codepen.io/trzmaxim/pen/GppXGE

CC @thompsongl

[jloleysens]

After digging around in the code a little I can see the logic for managing👆🏻all lives inside of react-beautiful-dnd. I found an issue (atlassian/react-beautiful-dnd#1001) with a comment (atlassian/react-beautiful-dnd#1001 (comment)) that hints at a solution to this.

I'll try to adjust my code (edit: elastic/kibana#63694) according to that example, but this still leaves an issue of a11y where moving children out via keyboard is fine, but move in less so.

[snide]

Yep. Just for some expectation. This one isn't on our roadmap for the next minor and it's a pretty specialized request that's more to do with the upstream lib. If you are interested in jamming on it we're happy to help review and support (in either repo)

[snide]

We're cleaning the backlog and had a discussion on this one. Right now there are no plans to add this functionality to add this to EUI directly. There are two reasons:

1. We're very baked into the react-beautiful-dnd ecosystem and would prefer it be handled upstream there.
2. We don't know a great way to handle this from an accessibility standpoint and think it would be difficult to provide.

If you think this is something you feel strongly about we'd suggest working in the upstream repo, or as you've been doing, continue to build something specific for your use case.