onLayoutChange returns invalid layout

[ankero]

Describe the bug

the onLayoutChange callback produces incorrect layout values in the following cases:

• Resize element with another element collapsing: incorrect moved element x -value
• Resize element with another element collapsing upwrads: incorrect collapsed element x -value
• Move element on row and element collapses upwards: incorrect element x-value
• onLayoutChange does not fire when layout is changed with new input values even though it induces collapsing (could be considered as intended behaviour)

Most likely this issue persists also on vertical collapse mode.

Workarounds:

• preventCollision=true // Collapsing does not happen, however the third issue remains.
• allowOverlap=true // Overlap doesn't matter, however the third issue remains.
• Get correct values through ref inside a short timeout (code below)

Getting correct value through ref. Note that depending on the way the state is being persisted, you may need to first persist the incorrect layout and then the correct layout through ref, otherwise the grid will be jerky.

const Parent = () => {
  const gridRef = useRef();

  const change = layout => {
    setTimeout(() => {
      const { layout: correctLayout } = gridRef.current.state;
    },1)
  }

  return <ReactGridLayout ref={gridRef} onLayoutChange={change} />
}

Proper fix: I unfortunately don't have time to do this, but to me it seems that the onLayoutChange fires with state which then changes after the component detects collision. Perhaps wait until all collisions are resolved before firing the callback.

Your Example Website or App

na

Steps to Reproduce the Bug or Issue

1. Add 2 elements into a grid
2. Expand another element so that the other element collision pushes it downwards
3. Check returned layout values

Expected behavior

Correct state should be returned

react-grid-layout library version

1.3.4

Operating System Version

macOS

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days