Merge pull request #2470 from adumesny/master

sub-grid styles fix

Author: Alain Dumesny

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [9.2.1-dev (TBD)](#921-dev-tbd)
 - [9.2.1 (2023-09-20)](#921-2023-09-20)
 - [9.2.0 (2023-09-10)](#920-2023-09-10)
 - [9.1.1 (2023-09-06)](#911-2023-09-06)
@@ -99,6 +100,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 9.2.1-dev (TBD)
+* fix - sub-grid styles now look for immediate correct parent, not any depth above.
+
 ## 9.2.1 (2023-09-20)
 * fix _updateContainerHeight() to use height rather than min-height again (apart for nested grids which need it) and partial getComputedStyle CSS minHeight support
 

src/gridstack.ts

@@ -318,7 +318,8 @@ export class GridStack {
     }
 
     // check if we're been nested, and if so update our style and keep pointer around (used during save)
-    let parentGridItem = (Utils.closestUpByClass(this.el, gridDefaults.itemClass) as GridItemHTMLElement)?.gridstackNode;
+    const grandParent: GridItemHTMLElement = this.el.parentElement?.parentElement;
+    let parentGridItem = grandParent?.classList.contains(gridDefaults.itemClass) ? grandParent.gridstackNode : undefined;
     if (parentGridItem) {
       parentGridItem.subGrid = this;
       this.parentGridItem = parentGridItem;

src/utils.ts

@@ -314,13 +314,13 @@ export class Utils {
   }
 
   /** return the closest parent (or itself) matching the given class */
-  static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
-    while (el) {
-      if (el.classList.contains(name)) return el;
-      el = el.parentElement
-    }
-    return null;
-  }
+  // static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
+  //   while (el) {
+  //     if (el.classList.contains(name)) return el;
+  //     el = el.parentElement
+  //   }
+  //   return null;
+  // }
 
   /** delay calling the given function for given delay, preventing new calls from happening while waiting */
   static throttle(func: () => void, delay: number): () => void {