Merge pull request #3377 from adumesny/master

vue, react: fix item content vanishing when dragging between 2 grids

Author: adumesny

doc/CHANGES.md

@@ -150,6 +150,7 @@ Change log
 * feat: [#2781](https://github.com/gridstack/gridstack.js/issues/3177) [#2781](https://github.com/gridstack/gridstack.js/issues/3177) mobile: pause to drag/reszie vs scroll behavior
 * fix: [#3374](https://github.com/gridstack/gridstack.js/issues/3374) use `moveBefore()` (when supported) instead of `appendChild()` in `_sortDom()` so reordering doesn't reload iframes / lose element state
 * fix: [#934](https://github.com/gridstack/gridstack.js/issues/934) disable pointer events on iframes while dragging/resizing so fast mouse moves aren't swallowed by the iframe's own document
+* fix: [#3371](https://github.com/gridstack/gridstack.js/issues/3371) (vue, react): item content vanished after dragging between 2 grids with `acceptWidgets`
 
 ## 13.2.0 (2026-08-19)
 * feat: [#701](https://github.com/gridstack/gridstack.js/issues/701) removed printMode as we support much better printing now that doesn't compromise.

react/projects/lib/gridstack-react.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { createRoot, type Root } from "react-dom/client";
 import { act } from "react";
 import { useState } from "react";
-import type { GridHTMLElement } from "gridstack";
+import type { GridHTMLElement, GridItemHTMLElement, GridStack as GridStackInstance } from "gridstack";
 import type { GridStackWidget } from "gridstack";
 import { GridStack } from "./src/gridstack";
 import { useWidgetSerializer } from "./src/hooks";
@@ -13,6 +13,32 @@ function flush(): Promise<void> {
   });
 }
 
+/**
+ * Replicates the DOM/engine bookkeeping GS core does in the `drop` handler when an
+ * item is dragged from one live grid into another (gridstack.ts `.on(this.el, 'drop', ...)`):
+ * the item element is reused via `appendChild` (no `addRemoveCB` call) and the node object
+ * is moved from one engine's node list to the other's. Used to reproduce cross-grid DnD
+ * without driving the real pointer-based drag/drop implementation through jsdom.
+ */
+function simulateCrossGridDrop(from: GridStackInstance, to: GridStackInstance, el: GridItemHTMLElement) {
+  const node = el.gridstackNode!;
+  const f = from as unknown as { engine: { nodes: unknown[]; removedNodes: unknown[]; removeNodeFromLayoutCache(n: unknown): void }; _triggerRemoveEvent(): unknown; _triggerChangeEvent(): unknown };
+  const t = to as unknown as { engine: { nodes: unknown[]; addedNodes: unknown[] }; el: HTMLElement; _triggerAddEvent(): unknown; _triggerChangeEvent(): unknown };
+
+  f.engine.removeNodeFromLayoutCache(node);
+  f.engine.nodes = f.engine.nodes.filter((n) => n !== node);
+  f.engine.removedNodes.push(node);
+  f._triggerRemoveEvent();
+  f._triggerChangeEvent();
+
+  node.grid = to;
+  t.engine.nodes.push(node);
+  t.el.appendChild(el);
+  t.engine.addedNodes.push(node);
+  t._triggerAddEvent();
+  t._triggerChangeEvent();
+}
+
 function Num({ start }: { start: number }) {
   const [n] = useState(start);
   useWidgetSerializer({ serialize: () => ({ extra: n }) });
@@ -180,4 +206,53 @@ describe("GridStack React wrapper", () => {
     await act(flush);
     expect(container.querySelector(".grid-stack")).toBeNull();
   });
+
+  it("keeps component content rendered after cross-grid drag & drop (#3371)", async () => {
+    const T = (p: Record<string, unknown>) => (
+      <span data-testid="portal">{String(p.label ?? "")}</span>
+    );
+
+    await act(async () => {
+      root.render(
+        <>
+          <GridStack
+            options={{
+              column: 12,
+              cellHeight: 50,
+              margin: 0,
+              acceptWidgets: true,
+              children: [
+                { id: "a1", x: 0, y: 0, w: 2, h: 2, component: "T", props: { label: "hello" } },
+              ],
+            }}
+            components={{ T }}
+          />
+          <GridStack
+            options={{ column: 12, cellHeight: 50, margin: 0, acceptWidgets: true, children: [] }}
+            components={{ T }}
+          />
+        </>
+      );
+    });
+    await act(flush);
+
+    expect(document.querySelector("[data-testid=\"portal\"]")?.textContent).toBe("hello");
+
+    const [gridElA, gridElB] = Array.from(
+      container.querySelectorAll(".grid-stack")
+    ) as GridHTMLElement[];
+    const gridA = gridElA.gridstack!;
+    const gridB = gridElB.gridstack!;
+    const itemEl = gridElA.querySelector(".grid-stack-item") as GridItemHTMLElement;
+
+    await act(async () => {
+      simulateCrossGridDrop(gridA, gridB, itemEl);
+    });
+    await act(flush);
+
+    // The item's DOM element physically moved into grid B's container...
+    expect(gridElB.contains(itemEl)).toBe(true);
+    // ...and its React-rendered content must have followed, not been unmounted.
+    expect(document.querySelector("[data-testid=\"portal\"]")?.textContent).toBe("hello");
+  });
 });

react/projects/lib/src/gridstack.tsx

@@ -20,6 +20,7 @@ import { GridStackItem } from "./gridstack-item";
 import { installGridStackReactCallbacks } from "./registry";
 import type {
   GridStackHostApi,
+  GridStackNode,
   GridStackOptions,
   GridStackWidget,
   GridHTMLElement,
@@ -242,6 +243,19 @@ export const GridStackComponent = forwardRef<GridStackHandle, GridStackProps>(
       const addedHandler: GridStackNodesHandler = (e, nodes) => {
         bumpLayout();
         setIsEmpty(false);
+        // Cross-grid DnD: GS reuses the existing item element (no addRemoveCB call), so
+        // `_gridItemRef.gridComp` still points at the source grid. Transfer portal
+        // ownership to this grid or the React subtree gets unmounted (item content vanishes).
+        nodes.forEach((node) => {
+          const n = node as GridStackNode;
+          const el = n.el as GridItemHTMLElement | undefined;
+          const ref = el?._gridItemRef;
+          if (n.component && ref && ref.gridComp !== hostApiRef.current) {
+            ref.gridComp.unregisterSyntheticItemId(ref.id);
+            hostApiRef.current.registerSyntheticItemId(ref.id);
+            el._gridItemRef = { id: ref.id, gridComp: hostApiRef.current };
+          }
+        });
         onAdded?.(e, nodes);
       };
       g.on("added", addedHandler);

react/vitest.config.ts

@@ -5,11 +5,16 @@ import { fileURLToPath, URL } from 'node:url'
 export default defineConfig({
   plugins: [react()],
   resolve: {
-    alias: {
-      'gridstack/dist/react': fileURLToPath(
-        new URL('./projects/lib/src/index.ts', import.meta.url)
-      ),
-    },
+    alias: [
+      {
+        find: 'gridstack/dist/react',
+        replacement: fileURLToPath(new URL('./projects/lib/src/index.ts', import.meta.url)),
+      },
+      {
+        find: /^gridstack$/,
+        replacement: fileURLToPath(new URL('../src/gridstack.ts', import.meta.url)),
+      },
+    ],
   },
   test: {
     environment: 'jsdom',

vue/projects/lib/gridstack-vue.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest'
 import { createApp, defineComponent, h, ref, type App } from 'vue'
-import type { GridHTMLElement } from 'gridstack'
+import type { GridHTMLElement, GridItemHTMLElement, GridStack as GridStackInstance } from 'gridstack'
 import type { GridStackWidget } from './src/types'
 import { GridStack } from './src/gridstack'
 import { useWidgetSerializer } from './src/composables'
@@ -20,6 +20,32 @@ function mountApp(component: ReturnType<typeof defineComponent> | ReturnType<typ
   return { app, container }
 }
 
+/**
+ * Replicates the DOM/engine bookkeeping GS core does in the `drop` handler when an
+ * item is dragged from one live grid into another (gridstack.ts `.on(this.el, 'drop', ...)`):
+ * the item element is reused via `appendChild` (no `addRemoveCB` call) and the node object
+ * is moved from one engine's node list to the other's. Used to reproduce cross-grid DnD
+ * without driving the real pointer-based drag/drop implementation through jsdom.
+ */
+function simulateCrossGridDrop(from: GridStackInstance, to: GridStackInstance, el: GridItemHTMLElement) {
+  const node = el.gridstackNode!
+  const f = from as unknown as { engine: { nodes: unknown[]; removedNodes: unknown[]; removeNodeFromLayoutCache(n: unknown): void }; _triggerRemoveEvent(): unknown; _triggerChangeEvent(): unknown }
+  const t = to as unknown as { engine: { nodes: unknown[]; addedNodes: unknown[] }; el: HTMLElement; _triggerAddEvent(): unknown; _triggerChangeEvent(): unknown }
+
+  f.engine.removeNodeFromLayoutCache(node)
+  f.engine.nodes = f.engine.nodes.filter((n) => n !== node)
+  f.engine.removedNodes.push(node)
+  f._triggerRemoveEvent()
+  f._triggerChangeEvent()
+
+  node.grid = to
+  t.engine.nodes.push(node)
+  t.el.appendChild(el)
+  t.engine.addedNodes.push(node)
+  t._triggerAddEvent()
+  t._triggerChangeEvent()
+}
+
 describe('GridStack Vue wrapper', () => {
   let app: App
   let container: HTMLDivElement
@@ -159,4 +185,51 @@ describe('GridStack Vue wrapper', () => {
 
     expect(container.querySelector('.grid-stack')).toBeNull()
   })
+
+  it('keeps component content rendered after cross-grid drag & drop (#3371)', async () => {
+    const T = defineComponent({
+      props: { label: { type: String, default: '' } },
+      setup(props) {
+        return () => h('span', { 'data-testid': 'portal' }, props.label)
+      },
+    })
+
+    const Root = defineComponent({
+      setup() {
+        const optionsA = {
+          column: 12, cellHeight: 50, margin: 0, acceptWidgets: true,
+          children: [
+            { id: 'a1', x: 0, y: 0, w: 2, h: 2, component: 'T', props: { label: 'hello' } },
+          ],
+        }
+        const optionsB = {
+          column: 12, cellHeight: 50, margin: 0, acceptWidgets: true,
+          children: [] as GridStackWidget[],
+        }
+        return () =>
+          h('div', [
+            h(GridStack, { options: optionsA, components: { T } }),
+            h(GridStack, { options: optionsB, components: { T } }),
+          ])
+      },
+    })
+
+    ;({ app, container } = mountApp(Root))
+    await flush()
+
+    expect(document.querySelector('[data-testid="portal"]')?.textContent).toBe('hello')
+
+    const [gridElA, gridElB] = Array.from(container.querySelectorAll('.grid-stack')) as GridHTMLElement[]
+    const gridA = gridElA.gridstack!
+    const gridB = gridElB.gridstack!
+    const itemEl = gridElA.querySelector('.grid-stack-item') as GridItemHTMLElement
+
+    simulateCrossGridDrop(gridA, gridB, itemEl)
+    await flush()
+
+    // The item's DOM element physically moved into grid B's container...
+    expect(gridElB.contains(itemEl)).toBe(true)
+    // ...and its Vue-rendered content must have followed, not been unmounted.
+    expect(document.querySelector('[data-testid="portal"]')?.textContent).toBe('hello')
+  })
 })

vue/projects/lib/src/gridstack.ts

@@ -22,6 +22,7 @@ import type {
   GridHTMLElement,
   GridItemHTMLElement,
   GridStackHostApi,
+  GridStackNode,
   GridStackOptions,
   GridStackWidget,
 } from './types'
@@ -208,6 +209,19 @@ export const GridStackComponent = defineComponent({
       grid.on('added', ((e: Event, nodes: Parameters<GridStackNodesHandler>[1]) => {
         layoutVersion.value++
         isEmpty.value = false
+        // Cross-grid DnD: GS reuses the existing item element (no addRemoveCB call), so
+        // `_gridItemRef.gridComp` still points at the source grid. Transfer teleport
+        // ownership to this grid or the Vue subtree gets unmounted (item content vanishes).
+        nodes.forEach((node) => {
+          const n = node as GridStackNode
+          const el = n.el as GridItemHTMLElement | undefined
+          const ref = el?._gridItemRef
+          if (n.component && ref && ref.gridComp !== hostApi) {
+            ref.gridComp.unregisterSyntheticItemId(ref.id)
+            hostApi.registerSyntheticItemId(ref.id)
+            el._gridItemRef = { id: ref.id, gridComp: hostApi }
+          }
+        })
         emit('added', e, nodes)
       }) as GridStackNodesHandler)