Hi! I'm Miguel Calderón and work at PSPDFKit. I'd like to say thanks for your package, which is great!
We've recently switched our SDK container from Iframe to Shadow DOM, and are about to upgrade to React 18, which is bringing up lots of small headaches, mostly caused by our own tech debt.
One of the problems we're finding is using react-draggable from within the Shadow DOM when setting the bounds prop to a selector.
Details
The bounds prop was not working correctly when set to a selector within a Shadow DOM tree. The reason is that the provided selector was being queried to ownerDocument and would throw if the node was attached within a Shadow root.
In the above playground try to drag the square - it will log an error instead.
If you set withShadow to false it will work.
The solution applied in this PR is to query the node returned by node.getRootNode() instead: this method returns ownerDocument when called on the normal DOM as before, but when the node is inside a Shadow root, the shadow root will be returned instead. Additionally, if the node is inside a fragment and not attached to a document nor a Shadow root, the topmost element will be returned.
Some tests have been added as well to cover bounds as parent as selector, from within a Shadow root and in the normal DOM.
Hi! I'm Miguel Calderón and work at PSPDFKit. I'd like to say thanks for your package, which is great!
We've recently switched our SDK container from Iframe to Shadow DOM, and are about to upgrade to React 18, which is bringing up lots of small headaches, mostly caused by our own tech debt.
One of the problems we're finding is using
react-draggablefrom within the Shadow DOM when setting theboundsprop to a selector.Details
The
boundsprop was not working correctly when set to a selector within a Shadow DOM tree. The reason is that the provided selector was being queried toownerDocumentand would throw if the node was attached within a Shadow root.Here's an example showing the problem: https://playcode.io/1996274
withShadowtofalseit will work.The solution applied in this PR is to query the node returned by
node.getRootNode()instead: this method returnsownerDocumentwhen called on the normal DOM as before, but when the node is inside a Shadow root, the shadow root will be returned instead. Additionally, if the node is inside a fragment and not attached to a document nor a Shadow root, the topmost element will be returned.Some tests have been added as well to cover
boundsasparentas selector, from within a Shadow root and in the normal DOM.