React-grid-layout: Several bugs with horizontal compactType

[jordanbb]

• [x] Bug
• [x] Feature Request
• [ ] Question

I'm loving this library so far but I've noticed a few bugs with horizontal compactType. These bugs seem to be unique to horizontal mode. I've outlined what I've run into below.

1. Collision between different sized draggables along the same row.

This appears to only happen if your dragging a smaller item near a larger item. In the gif the expected behavior is that the item being dragged should have swapped places with the larger item.

2. Dragging can cause the layout to re order over and over rapidly

This appears to only happen if you are dragging an item from the left most column.

3. Collision issues with the items in the left most column when draggin up or down.

When dragging an item in the left most column up or down into a new row, I would think that it should displace items to the right to make room, instead of swapping positions. The collision issue before the items swap appears to only be if your dragging an item into the bottom most row.

4. Prevent layout from changing unintentionally when dragging

Horizontal mode should probably create a column (similar to vertical creating a row) when dragging around so as not to force items to wrap to a new row. This behavior changes the layout as the user drags and can't be corrected by simply moving the item back to where you started like you can with vertical mode. This isn't really a bug but a suggested feature, but one that would make horizontal mode feel better in my opinion.

I may have some time to contribute and submit a PR for these fixes. I'm curious if anyone else may be working on any of these fixes though?

[STRML]

These issues are odd. I'm unaware of most of them. If you can write failing tests it would be very helpful and we can then collaborate on a fix in a PR.

[jordanbb]

Id love to help anyway I can. By failing tests do you mean a live example of these issues hosted on something like codesandbox.io?

[rezaabedian]

I have issue 2) happening in a project of mine. @jordanbb did you figure anything out?

[rezaabedian]

@jordanbb @STRML I have reproduced issue (2) _"Dragging can cause the layout to re order over and over rapidly"_ in a codesandbox https://codesandbox.io/s/v0359vj1y7?module=%2Fsrc%2FMyResponsiveGrid.js

I will try to investigate where the bug lies in the library, but what I have found so far is:

• The bug only occurs when compactType="horizontal"
• It occurs most frequently when you drag one of the left most grid items and drag it slowly to the right.

I have attached an animation of me reproducing it.

[HenryApolito]

Hey @rezaabedian I'm having the same issue with the horizontal compact type. Did you manage to figure out a solution for this issue?

[rezaabedian]

Hey @HenryApolito, I haven't found a fix that I'm entirely happy with, but I have found a change that reduces the annoyance of this bug. I'm away right now, but perhaps my colleague @vijaytv can post it. It essentially stops the layout thrashing, but the change isn't exactly bug free.

Happy to work with a few people to do an in-depth analysis and fix this bug for all.

[HenryApolito]

Hey @HenryApolito, I haven't found a fix that I'm entirely happy with, but I have found a change that reduces the annoyance of this bug. I'm away right now, but perhaps my colleague @vijaytv can post it. It essentially stops the layout thrashing, but the change isn't exactly bug free.

Ahh ok, I was just checking to see if anyone has solved this issue. I'll see what I can do to improve the behavior. Thanks for the reply.

[rezaabedian]

Any findings @HenryApolito?

[HenryApolito]

@rezaabedian I haven't had much spare time to look into this yet. For now I'm simply using the Vertical compact type while I focus on more important tasks. But I still plan to look into this as soon as I'm able to.

[rezaabedian]

@HenryApolito @STRML any ideas how we could tackle this?

[RyanCCollins]

I am seeing issue #2 as well. Does anyone have a solution for this?

[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