GridStack rearranges items in one-column layout

[Mykhail-Lukashevych]

Subject of the issue

When the layout switches to a single column, the items are rearranged after a page refresh

Your environment

• GridStack version: 12.3.3
• OS: macOS
• Browsers: Safari, Chrome

Steps to reproduce

1. Open the page: https://codepen.io/MLukashevich/full/ByjZmLE
2. Gradually shrink the browser window until the items are arranged in a single-column layout.
   Note: Initially, the items appear in the correct vertical order: 1 → 2 → 3
3. Refresh the browser page.
   Observe that the items are now rearranged in the order: 2 → 3 → 1

Expected behavior

The item order should remain consistent (1 → 2 → 3) after the browser page is reloaded, even in a single-column layout

[wellavelino]

👍🏾

[Mykhail-Lukashevych]

gridstack-rearrangement-issue.zip

[adumesny]

sorry can't run that site on my work laptop (blocked now) but looking at you attached code I see the issue:

grid.addWidget({ x: 0, y: 0, w: 14, h: 3, content: "item 1" });
grid.addWidget({ x: 14, y: 0, w: 14, h: 3, content: "item 2" });
grid.addWidget({ x: 0, y: 3, w: 8, h: 5, content: "item 3" });

1. you should not add 1 widget at a time (which will relayout) and expect the entire layout to be remembered 'correctly'. load() entire things at once, or batch() around it (not sure that would solve it)
2. if you think about it, in 1 column you are adding 'item 3' AFTER the fact item 1 + item 2 are already placed (could be long time before) with item 2 y=3 and you are saying grid.addWidget({ x: 0, y: 3, w: 8, h: 5, content: "item 3" }); so of course it's going to go at y=3 because you tell it to do so ! if you say y:4 it would be pushed after and with float:true work in 14 column mode as well.

won't fix.