avoid shadow DOM element getting re-appended when dragging

[wellavelino]

All my gridstack itens are deep down in the shadow DOM, when dragging I've noticed that my elements gets re-appended to the DOM which in turn makes my elements to make new api calls, I wonder if there's an way for Gridstack to look inside shadow DOM.

This is the place im referring to https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L302

[adumesny]

would be good if you can provide a simple example as I don't use shadowDOM to debug/fix it. that said the document.body.contains() probbaly doesn't need to get called in the first place unless you use clone() and require the function option to deal with it yourself...

[wellavelino]

hey @adumesny here is an working example, https://jsfiddle.net/L8z5vbnt/.

It calls https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L302 (in a different line), we are using gridstack 5 at the moment, planning to upgrade to latest soon, Ive also checked on latest and the behaviour is the same.

Is it something that would be nice to have as support?

[wellavelino]

@adumesny when you confirm it, I can actually work on it and put a PR to also look into the shadowDOM, I guess performance will also be needed to be taken into consideration, as probably requires transversing all nodes

[adumesny]

no I can probably just check if helper has a parent, and possibly assume only 'clone' needs to insert it anyway and rely on custom callback to do do the insert (possible breaking change, but unlikely).

In your example do you have a custom GridStackOptions.draggable.helper ? setupDragIn() is the only place typically used - do you have shadow DOM for side panel as well ?

[wellavelino]

no I can probably just check if helper has a parent, and possibly assume only 'clone' needs to insert it anyway and rely on custom callback to do do the insert (possible breaking change, but unlikely).

Ok, no prob

no, we don't have a custom GridStackOptions.draggable.helper we only listen to grid.on('change') as we need to handle some calls, our elements are all inside shadowDOM. That example in jsfiddle is as close as it gets to what we have.

[adumesny]

fixed in next release! that example made it simple to test/fix...
don't forget to donate if you find this lib useful.

[wellavelino]

@adumesny really appreciate it, i will look at what can be done about it!