SetupDragIn not working inside the web component

[arulselvan]

GridStack.setupDragIn not working inside the web component

Tried Gridstack inside the Lit web component, and it's working fine, but the scenario like dragging in the element from the sidebar (https://gridstackjs.com/demo/static.html) does not work inside shadow root.

Environment

• version of gridstack.js - ^7.2.3

• which browser/OS - all

Steps to reproduce

GridStack.setupDragIn method need to be called inside the web component(ShadowRoot), The following link has a working demo to reproduce the same inside Lit.
https://stackblitz.com/edit/vitest-dev-vitest-bzx77k?file=src/designer.ts

Expected behavior

Currently, inside setupDragInMethod, we are calling Utils.getElements,

gridstack.js/src/gridstack.ts

Line 1679 in d99a9f5

Utils.getElements(dragIn).forEach(el => {

Utils.getElements internally using document.querySelectorAll, I think to work inside the shadow root, we need to query inside the parent element or give an argument to the method where we should look in the shadow root scenario...

gridstack.js/src/utils.ts

Line 59 in d99a9f5

let list = document.querySelectorAll(els);

[adumesny]

or we could make setupDragIn() take an array of elements | string selector (like other methods) and you can pass the items you need... that may be more flexible in the long run.

[adumesny]

I didn't get to test it, but this should handle it in the next release.

[arulselvan]

I didn't get to test it, but this should handle it in the next release.

thanks @adumesny! upgraded to V8.0.1, and tested, works like a charm :)

[adumesny]

curious, are you passing a list of elements or the virtual DOM parent ?

[arulselvan]

tested both, and I'm passing a list of elements like the below snip...

`const availableWidgets = this.querySelectorAll(".newWidget");

const widgetElements: HTMLElement[] = Array.from(
  availableWidgets
) as HTMLElement[];

GridStack.setupDragIn(widgetElements, {
  appendTo: "parent",
  helper: "clone",
});`

Just thought, for Passing the root element as a param I think we can define a better type instead of the Document type currently tested the below snip works fine, but found during debugging inside Util.getElement in some specific condition, we using root.getElementById that might not be available for HTMLElement...

const root: Document = this.querySelector("#widgets-container") as unknown as Document; GridStack.setupDragIn(".newWidget", { appendTo: "parent", helper: "clone" }, root);

[adumesny]

good point. Utils.getElements() is supposed to get all elements (by class selector) but is also called for single ID which only works on the document, so signature need to be HTMLElement | Document. I'll change that.

[adumesny]

fixed the types. don't forget to donate if you find this lib useful!