NaN inf loop when using cellHeight rem/em

* fix gridstack#2357 and added demo for it
adumesny · Jun 12, 2023 · d75627d · d75627d
1 parent 8112402
commit d75627d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -93,6 +93,7 @@ Change log
 ## 8.2.1-dev (TBD)
 * fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support
 * fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs
+* fix [#2357](https://github.com/gridstack/gridstack.js/issues/2357) NaN inf loop when using cellHeight rem/em
 
 ## 8.2.1 (2023-05-26)
 * fix: make sure `removeNode()` uses internal _id (unique) and not node itself (since we clone those often)

diff --git a/spec/e2e/html/2357_rem.html b/spec/e2e/html/2357_rem.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<head>
+  <title>REM demo</title>
+  <link rel="stylesheet" href="../../../demo.css"/>
+  <script src="../../../dist/gridstack-all.js"></script>
+</head>
+<body>
+  <div class="grid-stack"></div>
+  <script type="text/javascript">
+    let items = [
+      {x: 0, y: 0},
+      {x: 1, y: 0},
+    ];
+    let count = 0;
+    items.forEach(d => d.content = String(count++));
+
+    let grid = GridStack.init({
+      // cellHeight: '90',
+      cellHeight: '8rem',
+    }).load(items);
+  </script>
+</body>
+</html>
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -732,7 +732,7 @@ export class GridStack {
     // else get first cell height
     let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
     if (el) {
-      let height = Utils.toNumber(el.getAttribute('gs-h'));
+      let height = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
       return Math.round(el.offsetHeight / height);
     }
     // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)