Subject of the issue

When using grid.save() after particular changes, the grid representation that gets returned is incorrect.

Your environment

• version of gridstack.js: 9.3.0
• which browser/OS: Windows 11, Google Chrome 117

Steps to reproduce

https://jsfiddle.net/vs81frby/

This Fiddle contains two grids, each one having two columns. The grids use the same options:

var options = {
 disableOneColumnMode: true,
 column: 2,
 row: 5,
 cellHeight: "50px",
 acceptWidgets: true,
 float: true
};

The grid on the right contains two items initially, labeled A and B. B is dragged to the left grid to position x: 1, y: 2. Item A is then resized to span the whole width of the right grid, thus having w: 2. It is then also moved to the left grid to position x: 0, y: 4. grid.save() returns x: 1, y: 2 in this case, however (the width returned is still correct: w: 2). A is then resized to be one column wide again – grid.save() incorrectly returns w: 6 now. Moving A to the top left position in the left grid should see grid.save() returning x: 0, y: 0, but it returns x: 1, y: -2.

The following GIF shows this behavior as well:

gridstack

Expected behavior

x, y, w and h should reflect the real values.

This might only be a bug in the grid.save() method, as the attributes gs-x, gs-y and gs-w on the actual DOM nodes do have the correct values.