Bug reportNov 11, 2026· 0:23· 11 views
React Grid Layout: tiles jump mid-drag with Horizontal compaction (v2.3.0)
0:23 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumHorizontal compactor applied during drag (layout recompute in onDrag), and the sync between the drag-time layout and the GRID_MATRIX / onLayoutChange output.
os: macOSdpr: 1page: /react-grid-layout/examples/00-showcase.htmllocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720breakpoint: sm (6 columns)library_version: v2.3.0
Repro steps
- 1.Open the RGL Example 00 - Showcase page. The status shows 'Compaction type: Vertical'.
- 2.Scroll down to the 'Generate New Layout', 'Change Compaction Type' and 'Resize All Corners' buttons.
- 3.Click 'Change Compaction Type'. The status changes to 'No Compaction'.
- 4.Click 'Change Compaction Type' again. The status changes to 'Horizontal'.
- 5.Press on tile 4 in the middle column.
- 6.Drag tile 4 downward and observe the other tiles.
Expected
With Horizontal compaction, dragging tile 4 down should not make unrelated tiles jump to another column mid-drag. The layout should not leave an uncompacted empty gap at the top of the right column. The GRID_MATRIX should match what is drawn.
Actual
At 17s, while tile 4 is being dragged, tile 0 jumps from the right column into the middle column where tile 4 was. The top of the right column stays empty from 17s to 22.6s. The GRID_MATRIX still lists 0: [4, 0, 2, 4] at 17s and 19s while tile 0 is drawn in the middle column. It only updates at 21s, to 0: [2, 0, 2, 4] and 4: [2, 6, 2, 5].
Evidence
visualControl: 'Change Compaction Type' works. The status reads 'No Compaction' at 9s and 'Horizontal' at 11s. The GRID_MATRIX updates at 11s, for example 2: [2, 12, 2, 4] and 6: [0, 16, 2, 5].
visualBefore the drag, tiles 1 and 5 are on the left, tile 4 is in the middle and tiles 0 and 11 are on the right.
visualTile 4 is highlighted with a pink border under the cursor. The click is logged with target role 'presentation', name '5', although the cursor is on tile 4.
visualMid-drag, tile 0 appears in the middle column and the top of the right column is empty. The dragged tile sits lower in the middle column.
visualThe GRID_MATRIX still shows 0: [4, 0, 2, 4] while tile 0 is drawn in the middle column.
visualThe GRID_MATRIX updates late: 0: [2, 0, 2, 4], 4: [2, 6, 2, 5], 11: [4, 12, 2, 4], 12: [4, 8, 2, 4], 13: [4, 5, 2, 3].
visualThe empty gap at the top of the right column is still present. The layout and matrix are unchanged from 21s.
Issue markdown (copy-paste ready)
## Summary With Horizontal compaction active on the v2.3.0 Showcase example, dragging a tile makes another tile jump to a different column mid-drag. An empty gap stays at the top of the right column. The GRID_MATRIX lags behind the drawn layout. ## Environment - Chromium 151.0.7922.34, macOS - Viewport 1280x720, dpr 1 - Page: /react-grid-layout/examples/00-showcase.html (v2.3.0) - Breakpoint: sm (6 columns) ## Steps to reproduce 1. Open the Showcase example. The status shows 'Compaction type: Vertical' (0s). 2. Scroll down to the grid controls (3.5s). 3. Click 'Change Compaction Type'. The status shows 'No Compaction' (7.6s). 4. Click 'Change Compaction Type' again. The status shows 'Horizontal' (9.6s). 5. Press on tile 4 in the middle column (15.2s). 6. Drag tile 4 downward (17s). ## Expected Other tiles should not jump between columns mid-drag. No uncompacted gap should be left at the top of the right column. The GRID_MATRIX should reflect the drawn positions. ## Actual - At 17s tile 0 jumps from the right column into the middle column. The top of the right column becomes empty and stays empty through 22.6s. - At 17s and 19s the GRID_MATRIX still lists `0: [4, 0, 2, 4]` while tile 0 is drawn in the middle column. - At 21s the matrix catches up: `0: [2, 0, 2, 4]`, `4: [2, 6, 2, 5]`, `11: [4, 12, 2, 4]`, `12: [4, 8, 2, 4]`, `13: [4, 5, 2, 3]`. ## Control (works) Switching compaction type works. The label cycles Vertical > No Compaction (9s) > Horizontal (11s), and the matrix updates at 11s. ## Notes - The click at 15.2s is logged with target name '5', but the cursor and the pink highlight are on tile 4. - No console or network data was captured. ## Suspected area Horizontal compactor during drag, and the sync between the drag-time layout and the onLayoutChange / GRID_MATRIX output. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →