Support usage in shadow roots

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

https://react-beautiful-dnd.netlify.app

Other

33.34k stars 2.56k forks source link

Support usage in shadow roots #1659

Open danielbigler opened 4 years ago

danielbigler commented 4 years ago

Expected behavior

I´m using rbd in an app that is wrapped by a web component which uses the shadow DOM.

Actual behavior

Drag and drop is not possible and in the browser console I get the error message, that drag handle could not be found. Is there a way we can get this working?

Steps to reproduce

Use rbd in the shadow DOM.

What version of `React` are you using?

16.12.0

What version of `react-beautiful-dnd` are you running?

12.1.1

What browser are you using?

Chrome 78, Firefox 71

Demo

https://codesandbox.io/s/vertical-list-wn7dd

alexreardon commented 4 years ago

We try to find the drag handle using a selector. If the drag handle is within a shadow dom, then my understanding is that we cannot query what is in the shadow DOM from the outside. Does that sound right?

alexreardon commented 4 years ago

I could not find a way to do it with a selector. It looks like you need to find the shadow root and then you can query from there. We'll need to think through what is the best way to do this. Ideally, we do not query every shadow root.

Some initial thinking:

ask consumers to put a data attribute on the shadow roots they do want us to query
allow consumers to pass in a findDragHandleIdByEvent override where consumers can do things like query shadow roots

danielbigler commented 4 years ago

@alexreardon thank you!

We try to find the drag handle using a selector. If the drag handle is within a shadow dom, then my understanding is that we cannot query what is in the shadow DOM from the outside. Does that sound right?

Sounds right to me and I think exactly that´s the problem.

ask consumers to put a data attribute on the shadow roots they do want us to query

I tried to hack a little solution for this one by attaching the data-shadow="true" attribute to the custom element. Afterwards it is possible to find the drag handle by e.g. using document.querySelector('[data-shadow="true"]').shadowRoot.querySelectorAll('[data-rbd-drag-handle-context-id="0"]').

However, it´s still not possible to move the items in the list. Is it possible, that we also have to fix something with events in the shadow root?

achang97 commented 4 years ago

Any updates on this? I am also having the same problem and would love the afore-mentioned feature of having access to the shadow dom. @alexreardon

diegoddox commented 4 years ago

I'm facing the same issue as @alexreardon the only thing left is to make the items move.

heyheman11 commented 3 years ago

I would love to use react-beautful-dnd but can't because of this, it wasn't mentioned in the documentation either

sunshinesanty commented 3 years ago

I would also love to use this solution but have been hamstrung by this issues. We are building micro-frontend apps and have to use web-component with shadowDOM for isolation. Is there any roadmap from RBD for solving this issue?

joeldsouzax commented 3 years ago

oh I created a beautiful application using this and now when trying to make it micro-frontend compatible, I am getting some issues... hopefully it would be fixed soon.

kantorv commented 3 years ago

same here

spielzeugland commented 3 years ago

Uploaded a proposal #2264 to get DnD work at least inside one parent shadowRoot. Would be happy to get some feedback on the approach.

peratik commented 3 years ago

same here

AnnVoV commented 3 years ago

same here

buigiaanfb1 commented 2 years ago

same here! Are there any libraries like react-beautiful-dnd that working on Shadow Root?

jelorivera08 commented 2 years ago

same here!

spielzeugland commented 2 years ago

This and also any other new feature probably won't come. As stated by the owner in the README.md and discussed in #2319 already this library is kind of dead (maintenance mode). Either you can convince atlassian to take over the maintenance of this repository or create a community fork and include my change or your own implementation. Seems there are some people interested in this as web components becoming more popular. You might even become famous ;-). I can't help as I am working on another project already.