[React] Item Content is missing on Drag and Drop items

[chungwong]

Item Content is missing on Drag and Drop items

I asked the question on Slack and I was wising it will be fixed on the new React codebase. However, it still presents in the new code.

Your environment

• tested on commit 16f3fec01b5ff8239ca264226b5defdbf3916753 but it happens on the release before v11.4.0 too
• Version 129.0.6668.70 (Official Build) (64-bit)

Steps to reproduce

cd gridstack.js/react

# apply the diff provided below to `src/demo/demo.tsx`

npm run dev

diff --git a/react/src/demo/demo.tsx b/react/src/demo/demo.tsx
index 2e1499b5..5071091c 100644
--- a/react/src/demo/demo.tsx
+++ b/react/src/demo/demo.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, useEffect, useState } from "react";
-import { GridStackOptions, GridStackWidget } from "gridstack";
+import { GridStackOptions, GridStack, GridStackWidget } from "gridstack";
 import {
   ComponentDataType,
   ComponentMap,
@@ -136,8 +136,17 @@ export function GridStackDemo() {
   // ! Uncontrolled
   const [initialOptions] = useState(gridOptions);
 
+  useEffect(() => {
+    // setup drag drop behavior
+    let sidebarContent = [
+      { w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
+    ];
+    GridStack.setupDragIn('.sidebar-item', undefined, sidebarContent);
+  }, []);
+
   return (
     <GridStackProvider initialOptions={initialOptions}>
+      <div className="sidebar-item grid-stack-item">Drag nested</div>
       <Toolbar />
 
       <GridStackRenderProvider>

Expected behavior

The item content shouldn't be missing.

[Aysnine]

An experimental component <GridStackDragInItem> here: https://github.com/Aysnine/gridstack-react/blob/main/src/examples/004-drag-in/index.tsx

New new react wrapper design on the way.

[AO19]

An experimental component here: https://github.com/Aysnine/gridstack-react/blob/main/src/examples/004-drag-in/index.tsx

New new react wrapper design on the way.

How are you getting along? Need any help?

[Codefox11]

An experimental component here: https://github.com/Aysnine/gridstack-react/blob/main/src/examples/004-drag-in/index.tsx

New new react wrapper design on the way.

An experimental component here: https://github.com/Aysnine/gridstack-react/blob/main/src/examples/004-drag-in/index.tsx

New new react wrapper design on the way.

it's very nice wrapper :)

[Codefox11]

@Aysnine I've one question. when drag element from toolbar, I'd like to use addWidget() after do some actions like calling API and get id for widget etc. how can I do it?