Dashboards: Fix react-grid-layout placeholder stuck when dragging panel across rows

Toggle isDraggable off/on when removing a panel from SceneGridLayout to force
react-grid-layout to exit drag mode and clear its internal state. This prevents
the placeholder from remaining stuck when dragging panels from a custom grid
inside a row to another layout.
This commit is contained in:
oscarkilhed
2026-01-13 16:14:00 +01:00
parent d599a2b125
commit 47bb27a977
@@ -193,8 +193,23 @@ export class RowItem
if (gridItem instanceof DashboardGridItem || gridItem instanceof AutoGridItem) {
const layout = gridItem.parent;
if (gridItem instanceof DashboardGridItem && layout instanceof SceneGridLayout) {
// Toggle isDraggable off to force react-grid-layout to exit drag mode
// This clears react-grid-layout's internal drag state
// This is a workaround until we upgrade to react-grid-layout 2.x.x
const wasDraggable = layout.state.isDraggable;
if (wasDraggable) {
layout.setState({ isDraggable: false });
}
const newChildren = layout.state.children.filter((child) => child !== gridItem);
layout.setState({ children: newChildren });
// Restore isDraggable after a microtask to ensure react-grid-layout processes the change
if (wasDraggable) {
queueMicrotask(() => {
layout.setState({ isDraggable: true });
});
}
} else if (gridItem instanceof AutoGridItem && layout instanceof AutoGridLayout) {
const newChildren = layout.state.children.filter((child) => child !== gridItem);
layout.setState({ children: newChildren });