SetupDragIn not working inside the web component

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);

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.

setupDragIn() shadow DOM support

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

@adumesny

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 :)

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

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);

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.

setupDragIn() signature fix

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

Navigation Menu

Repository navigation

SetupDragIn not working inside the web component #2275

GridStack.setupDragIn not working inside the web component

Environment

Steps to reproduce

Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SetupDragIn not working inside the web component #2275

Description

GridStack.setupDragIn not working inside the web component

Environment

Steps to reproduce

Expected behavior

Activity

adumesny commented on Apr 27, 2023

adumesny commented on Apr 29, 2023

arulselvan commented on May 3, 2023

adumesny commented on May 3, 2023

arulselvan commented on May 5, 2023

adumesny commented on May 5, 2023

adumesny commented on May 6, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions