nested grid fix #2560

doc/CHANGES.md

@@ -110,7 +110,8 @@ Change log
 ## 10.0.1-dev (TBD)
 * feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units
 * fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix
-* fix: [#2578](https://github.com/gridstack/gridstack.js/issues/2578) column('none') now ignores layouts
+* fix: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) column('none') now ignores layouts
+* fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again).
 
 ## 10.0.1 (2023-12-10)
 * fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent

src/dd-droppable.ts

@@ -94,7 +94,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
 
     // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
     if (DDManager.dropElement && DDManager.dropElement !== this) {
-      DDManager.dropElement._mouseLeave(e as DragEvent, true);
+      DDManager.dropElement._mouseLeave(e as DragEvent, true); // calledByEnter = true
     }
     DDManager.dropElement = this;
 
@@ -108,7 +108,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
   }
 
   /** @internal called when the item is leaving our area, stop tracking if we had moving item */
-  protected _mouseLeave(e: MouseEvent, external = false): void {
+  protected _mouseLeave(e: MouseEvent, calledByEnter = false): void {
     // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
     if (!DDManager.dragElement || DDManager.dropElement !== this) return;
     e.preventDefault();
@@ -120,19 +120,21 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     }
     this.triggerEvent('dropout', ev);
 
-    if (!external && DDManager.dropElement === this) {
+    if (DDManager.dropElement === this) {
       delete DDManager.dropElement;
       // console.log('not tracking'); // TEST
 
       // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
-      let parentDrop: DDDroppable;
-      let parent: DDElementHost = this.el.parentElement;
-      while (!parentDrop && parent) {
-        parentDrop = parent.ddElement?.ddDroppable;
-        parent = parent.parentElement;
-      }
-      if (parentDrop) {
-        parentDrop._mouseEnter(e);
+      if (!calledByEnter) {
+        let parentDrop: DDDroppable;
+        let parent: DDElementHost = this.el.parentElement;
+        while (!parentDrop && parent) {
+          parentDrop = parent.ddElement?.ddDroppable;
+          parent = parent.parentElement;
+        }
+        if (parentDrop) {
+          parentDrop._mouseEnter(e);
+        }
       }
     }
   }