From 47bb27a97798a8942c927f55adbee6950db2be9e Mon Sep 17 00:00:00 2001 From: oscarkilhed Date: Tue, 13 Jan 2026 16:14:00 +0100 Subject: [PATCH] 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. --- .../dashboard-scene/scene/layout-rows/RowItem.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx index 154ebf7875a..6ecf8bc19e4 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx @@ -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 });