Skip to content

Issue with compactType={null} and preventCollision={false} causing unexpected Y-axis movement in version 1.5.0 #2131

Open
@hkpark130

Description

@hkpark130

Describe the bug

In React-Grid-Layout 0.18.3 , when compactType is set to null and preventCollision={false}, elements are arranged as expected.
However, in version 1.5.0 , grid items unexpectedly shift along the Y-axis , which is not the expected behavior.
➡️ I want to use version 1.5.0 but maintain the positioning behavior of 0.18.3.

Your Example Website or App

https://codesandbox.io/p/sandbox/1-5-0-grid-96w46p

Steps to Reproduce the Bug or Issue

  1. Set compactType=null and preventCollision={false}.
  2. In 0.18.3 , layout behaves as expected.
  3. In 1.5.0 , items unexpectedly move along the Y-axis instead of keeping their original positions.

Expected behavior

The grid layout in 1.5.0 should behave the same way as in 0.18.3 .
Items should not be dramatically moved along the Y-axis when preventCollision={false}.

react-grid-layout library version

1.5.0

Operating System Version

Windows

Browser

Chrome

Additional context

Actual Behavior

  • In 1.5.0 , items shift dramatically along the Y-axis , unlike version 0.18.3.

Reproducible Example (CodeSandbox)

✔️ Version 0.18.3 (Works as expected)
🔗 CodeSandbox - 0.18.3

❌ Version 1.5.0 (Unexpected Y-axis movement)
🔗 CodeSandbox - 1.5.0

Environment

  • "react": "^18.0.0",
  • "react-dom": "^18.0.0",
  • "vite": "^6.2.1"

Additional Context

  • When compactType=null and preventCollision=false, items remain in place and overlap in 0.18.3 but are forcibly moved down (Y-axis) in 1.5.0 .
  • Was there a change in the compaction logic after 0.18.3?
  • Is there any workaround or setting available to retain the old behavior while still using version 1.5.0?

🙇 Please let me know if this can be resolved. Thank you! 🙏

Screenshots or Videos

  • (0.18.3 working)
    Image

  • (1.5.0 issue)
    Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions