Open danielbigler opened 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?
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:
findDragHandleIdByEvent
override where consumers can do things like query shadow roots@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?
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
I'm facing the same issue as @alexreardon the only thing left is to make the items move.
I would love to use react-beautful-dnd but can't because of this, it wasn't mentioned in the documentation either
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?
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.
same here
Uploaded a proposal #2264 to get DnD work at least inside one parent shadowRoot. Would be happy to get some feedback on the approach.
same here
same here
same here! Are there any libraries like react-beautiful-dnd that working on Shadow Root?
same here!
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.
same here
@casieber Just tried, it works perfectly! Thank you so much!
@casieber I'm sorry but how do I install your version?
https://www.npmjs.com/package/@iamlemon/rbd guys, maybe you can try it.
https://www.npmjs.com/package/@iamlemon/rbd 伙计们,也许你们可以尝试一下。
You really are my god
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.
Suggested solution?
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