NaN inf loop when using cellHeight rem/em

adumesny · adumesny · commit d75627d73e81 · 2023-06-11T18:27:42.000-07:00
* fix gridstack#2357 and added demo for it
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)

Original file line number	Diff line number	Diff line change
`@@ -732,7 +732,7 @@ export class GridStack {`
`732`	`732`	`// else get first cell height`
`733`	`733`	`let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;`
`734`	`734`	`if (el) {`
`735`		`- let height = Utils.toNumber(el.getAttribute('gs-h'));`
	`735`	`+ let height = Utils.toNumber(el.getAttribute('gs-h')) \|\| 1; // since we don't write 1 anymore`
`736`	`736`	`return Math.round(el.offsetHeight / height);`
`737`	`737`	`}`
`738`	`738`	`// else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)`