gridstack
diff --git a/‎spec/regression-spec.ts‎
Lines changed: 60 additions & 0 deletions b/‎spec/regression-spec.ts‎
Lines changed: 60 additions & 0 deletions
@@ -1,4 +1,6 @@
 import { GridItemHTMLElement, GridStack, GridStackWidget } from '../src/gridstack';
+import type { GridStackNode } from '../src/types';
+import { Utils } from '../src/utils';
 
 describe('regression >', () => {
   'use strict';
@@ -108,4 +110,62 @@ describe('regression >', () => {
       expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
     });
   });
+
+  describe('3175 hovering to nest must not lose the underlying widget >', () => {
+    beforeEach(() => {
+      document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+    });
+    afterEach(() => {
+      delete GridStack.addRemoveCB;
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+
+    // NOTE: the report is a video on the nested_advanced demo with no code reference, and the
+    // dynamic-nesting trigger needs real 80%-coverage drag geometry, so this could NOT be
+    // reproduced at the API level. These lock in the create -> revert round trip either way.
+    const makeGrid = () => GridStack.init({column: 12, cellHeight: 50, subGridDynamic: true,
+      children: [{id: 'under', x: 0, y: 0, w: 4, h: 2, content: 'IMPORTANT'}]});
+
+    it('keeps the hovered widget when a sub-grid is created over it', () => {
+      grid = makeGrid();
+      const under = grid.engine.nodes.find(n => n.id === 'under')!;
+      grid.makeSubGrid(under.el!, undefined, {id: 'dropped', w: 2, h: 2, content: 'new'} as GridStackNode);
+
+      const sg = under.subGrid!;
+      expect(sg).toBeTruthy();
+      expect(sg.engine.nodes.length).toBeGreaterThan(0);
+      expect(sg.el.textContent).toContain('IMPORTANT'); // the underlying widget is still there
+    });
+
+    it('keeps it through the addRemoveCB path too (framework wrappers)', () => {
+      GridStack.addRemoveCB = (parent, w, add, isGrid) => {
+        if (!add) return undefined;
+        if (isGrid) {
+          const e = Utils.createDiv(['grid-stack']);
+          parent.appendChild(e);
+          return e;
+        }
+        const e = Utils.createDiv(['grid-stack-item']);
+        const c = Utils.createDiv(['grid-stack-item-content'], e);
+        if (w.content) c.textContent = w.content;
+        return e;
+      };
+      grid = makeGrid();
+      const under = grid.engine.nodes.find(n => n.id === 'under')!;
+      grid.makeSubGrid(under.el!, undefined, {id: 'dropped', w: 2, h: 2, content: 'new'} as GridStackNode);
+      expect(under.subGrid!.el.textContent).toContain('IMPORTANT');
+    });
+
+    it('gives the widget back when the temporary sub-grid is reverted', () => {
+      grid = makeGrid();
+      const under = grid.engine.nodes.find(n => n.id === 'under')!;
+      grid.makeSubGrid(under.el!, undefined, {id: 'dropped', w: 2, h: 2, content: 'new'} as GridStackNode);
+      const sg = under.subGrid!;
+
+      sg.removeAsSubGrid(); // what leaving the hover does for a temp sub-grid
+
+      expect(grid.engine.nodes.length).toBeGreaterThan(0);
+      expect(grid.el.textContent).toContain('IMPORTANT'); // not swallowed by the revert
+    });
+  });
 });