Merge pull request #3410 from adumesny/master

(react) drag-in widget id fix

Author: adumesny

doc/CHANGES.md

@@ -159,6 +159,7 @@ Change log
 [title_drag.html](https://gridstackjs.com/demo/title_drag.html).
 * fix: [#3188](https://github.com/gridstack/gridstack.js/issues/3188) release the global touch latch when a widget is destroyed mid-touch
 * fix: [#2953](https://github.com/gridstack/gridstack.js/issues/2953) API update() honors maxRow like dragging does
+* fix: [#2976](https://github.com/gridstack/gridstack.js/issues/2976) (react): render a drag-in widget that has a component but no id
 * fix: [#2703](https://github.com/gridstack/gridstack.js/issues/2703) allow dragging from elements nested inside a button/input handle
 
 ## 13.3.0 (2026-09-11)

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

@@ -255,4 +255,50 @@ describe("GridStack React wrapper", () => {
     // ...and its React-rendered content must have followed, not been unmounted.
     expect(document.querySelector("[data-testid=\"portal\"]")?.textContent).toBe("hello");
   });
+
+  it("#2976 renders a sidebar drag-in widget that has a component but no id", async () => {
+    await act(async () => {
+      root.render(
+        <GridStack
+          options={{ column: 12, cellHeight: 50, margin: 0, children: [] }}
+          components={{
+            Side: (p: Record<string, unknown>) => (
+              <span data-testid="dragin">{String(p.label ?? "")}</span>
+            ),
+          }}
+        />
+      );
+    });
+    await act(flush);
+
+    const gridEl = container.querySelector(".grid-stack") as GridHTMLElement;
+    const g = gridEl?.gridstack as GridStackInstance;
+    expect(g).toBeTruthy();
+
+    // What GS core does at the end of its `drop` handler for a sidebar item
+    // (gridstack.ts: `el = this.addWidget(node)`): the spec comes straight from
+    // GridStack.setupDragIn(..., widgets) so it has NO id of its own.
+    await act(async () => {
+      g.addWidget({ w: 2, h: 2, component: "Side", props: { label: "dropped" } } as GridStackWidget);
+    });
+    await act(flush);
+
+    expect(
+      document.querySelector('[data-testid="dragin"]')?.textContent
+    ).toBe("dropped");
+
+    // a second drop of the same spec must get its own portal, not collide with the first
+    await act(async () => {
+      g.addWidget({ w: 2, h: 2, component: "Side", props: { label: "again" } } as GridStackWidget);
+    });
+    await act(flush);
+    const both = Array.from(document.querySelectorAll('[data-testid="dragin"]')).map(e => e.textContent);
+    expect(both.sort()).toEqual(["again", "dropped"]);
+
+    // and the minted id round-trips through save() so layouts stay reloadable
+    const saved = g.save(false) as GridStackWidget[];
+    expect(saved.length).toBe(2);
+    expect(saved.every(w => !!w.id)).toBe(true);
+    expect(new Set(saved.map(w => w.id)).size).toBe(2);
+  });
 });

react/projects/lib/src/registry.ts

@@ -10,6 +10,9 @@ import type {
   GridStackWidget,
 } from "./types";
 
+/** @internal minted ids for widgets that arrive without one (sidebar drag-in) - see gsCreateReactComponents */
+let syntheticIdSeq = 0;
+
 export function installGridStackReactCallbacks(): void {
   if (!GridStack.addRemoveCB) {
     GridStack.addRemoveCB = gsCreateReactComponents;
@@ -60,6 +63,12 @@ export function gsCreateReactComponents(
     const el = Utils.createDiv(itemClasses) as GridItemHTMLElement;
     Utils.createDiv(["grid-stack-item-content"], el);
 
+    // Widgets dropped in from a sidebar (GridStack.setupDragIn) carry no id - the same spec is
+    // dropped over and over, so it can't have one - yet the portal that renders `component` is
+    // keyed by id. Without one we used to silently skip rendering and leave an empty item (#2976).
+    // `w` is the object GS turns into the node, so writing it back sticks for save()/updateCB too.
+    if (!w.id && w.component) w.id = `gs-react-${++syntheticIdSeq}`;
+
     const id = w.id;
     if (id) {
       el._gridItemRef = { id, gridComp: gridHost };