Skip to content

grid.load() regression in v12.4.x — widgets without explicit h property all stack at (0,0), gs-current-row="NaN" #3266

@vukadinFE

Description

@vukadinFE

Describe the bug

After upgrading from 12.3.3 to 12.4.2, all widgets loaded via grid.load() stack on top of each other at position (0, 0). The grid container shows gs-current-row="NaN" and every item gets gs-x="0" gs-y="0".

The issue appears to be caused by widgets that omit the h (height) property. In 12.3.3, h defaults to 1 implicitly. In 12.4.x, the missing h causes row calculation to produce NaN, breaking the entire layout.

To Reproduce

const grid = GridStack.init({
  float: false,
  cellHeight: 292,
  minRow: 1,
  margin: "8px",
  column: 2,
  disableResize: true,
});

// Widgets WITHOUT explicit `h` property
grid.load([
  { type: "widget-A", w: 2, x: 0, y: 0 },
  { type: "widget-B", w: 1, x: 0, y: 1 },
  { type: "widget-C", w: 1, x: 1, y: 1 },
  { type: "widget-D", w: 2, x: 0, y: 2 },
]);

Expected behavior

Widgets should default to h: 1 when h is not provided (as in 12.3.3), and layout correctly based on their x/y values.

Actual behavior

All widgets render at (0, 0) overlapping each other. Inspecting the DOM:

v12.3.3 (working):

<div class="grid-stack" gs-current-row="4" style="--gs-cell-height: 292px; --gs-column-width: 50%;">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
  <div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="1" style="top: var(--gs-cell-height); left: var(--gs-column-width);">
  ...
</div>

v12.4.2 (broken):

<div class="grid-stack" gs-current-row="NaN" style="--gs-cell-height: 292px; --gs-column-width: 50%;">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
  ...
</div>

Workaround

Explicitly adding h: 1 to every widget before calling load() fixes the issue:

grid.load(widgets.map(w => ({ ...w, h: 1 })));

Environment

  • gridstack version: 12.4.2 (works on 12.3.3)
  • Browser: Chrome (latest)
  • Framework: Vue 3 (using GridStack.renderCB)
  • Build tool: Vite (issue occurs in production builds; dev mode also affected)

Additional context

The regression was likely introduced by a change in load() or the engine's layout calculation between 12.3.3 and 12.4.0. Previously, missing h was implicitly treated as 1. Now it seems to propagate as undefined/NaN through the row height calculation, causing gs-current-row="NaN" on the container.

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