Open
Description
Hi,
I wanted to test gridstack for my project and made a very basic grid like this:
export function GridStackPage() {
const [grid1Options] = useState(() => createGridOptions());
const [grid2Options] = useState(() => createGridOptions());
return (
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<h3>Grid 1</h3>
<GridStackProvider initialOptions={grid1Options}>
<Toolbar gridNumber={1} />
<GridStackRenderProvider>
<GridStackRender componentMap={COMPONENT_MAP} />
</GridStackRenderProvider>
</GridStackProvider>
</div>
<div style={{ flex: 1 }}>
<h3>Grid 2</h3>
<GridStackProvider initialOptions={grid2Options}>
<Toolbar gridNumber={2} />
<GridStackRenderProvider>
<GridStackRender componentMap={COMPONENT_MAP} />
</GridStackRenderProvider>
</GridStackProvider>
</div>
</div>
);
}Whenever I want to add a widget in them, it works fine for the last one but crashes for all the ones before (here grid 1).
The reason for the crash is :
Uncaught Error: Widget container not found for id: widget-39vq52659p5
children grid-stack-render.tsx:55
GridStackRender grid-stack-render.tsx:47
React 18
current grid-stack-render-provider.tsx:35
renderCB grid-stack-render-provider.tsx:41
createWidgetDivs utils.ts:128
addWidget gridstack.ts:470
addSubGrid grid-stack-provider.tsx:60
onClick GridStackDemo.tsx:210
It comes from GridStackRenderProvider, in
<GridStackRenderContext.Provider
value={useMemo(
() => ({
getWidgetContainer: (widgetId: string) => {
return widgetContainersRef.current.get(widgetId) || null;
},
}),
// ! gridStack is required to reinitialize the grid when the options change
// eslint-disable-next-line react-hooks/exhaustive-deps
[gridStack]
)}
>
<div ref={containerRef}>{gridStack ? children : null}</div>
</GridStackRenderContext.Provider>as widgetContainersRef.current.get(widgetId) unexpectedly returns undefined.
I would appreciate some help here.