Merge pull request #1251 from adumesny/typescript

prevent removing another grid's item

Author: adumesny

doc/CHANGES.md

@@ -36,6 +36,7 @@ Change log
 ## 1.1.1-dev (upcoming)
 
 - fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode
+- fix [1250](https://github.com/gridstack/gridstack.js/issues/1250) don't remove item from another grid
 - add `getGridItems()` to return list of HTML grid items
 
 ## 1.1.1 (2020-03-17)

spec/gridstack-spec.ts

@@ -8,10 +8,10 @@ describe('gridstack', function() {
   let gridHTML =
   '<div class="grid-stack">' +
   '  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2" id="item1">' +
-  '    <div class="grid-stack-item-content"></div>' +
+  '    <div class="grid-stack-item-content">item 1</div>' +
   '  </div>' +
   '  <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4" id="item2">' +
-  '    <div class="grid-stack-item-content"></div>' +
+  '    <div class="grid-stack-item-content">item 2</div>' +
   '  </div>' +
   '</div>';
   let gridstackHTML =
@@ -1386,6 +1386,42 @@ describe('gridstack', function() {
     });
   });
 
+  describe('two grids', function() {
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridHTML);
+      document.body.insertAdjacentHTML('afterbegin', gridHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('should not remove incorrect child', function() {
+      let grids = GridStack.initAll();
+      expect(grids.length).toBe(2);
+      expect(grids[0].engine.nodes.length).toBe(2);
+      expect(grids[1].engine.nodes.length).toBe(2);
+      // should do nothing
+      grids[0].removeWidget( grids[1].engine.nodes[0].el );
+      expect(grids[0].engine.nodes.length).toBe(2);
+      expect(grids[0].el.children.length).toBe(2);
+      expect(grids[1].engine.nodes.length).toBe(2);
+      expect(grids[1].el.children.length).toBe(2);
+      // should empty with no errors
+      grids[1].removeAll();
+      expect(grids[0].engine.nodes.length).toBe(2);
+      expect(grids[0].el.children.length).toBe(2);
+      expect(grids[1].engine.nodes.length).toBe(0);
+      expect(grids[1].el.children.length).toBe(0);
+    });
+    it('should remove 1 child', function() {
+      let grids = GridStack.initAll();
+      grids[1].removeWidget( grids[1].engine.nodes[0].el );
+      expect(grids[0].engine.nodes.length).toBe(2);
+      expect(grids[0].el.children.length).toBe(2);
+      expect(grids[1].engine.nodes.length).toBe(1);
+      expect(grids[1].el.children.length).toBe(1);
+    });
+  });
+
   describe('ddPlugin option', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);

src/gridstack.ts

@@ -829,6 +829,7 @@ export class GridStack {
    */
   public removeWidget(els: GridStackElement, detachNode?: boolean): GridStack {
     this.getElements(els).forEach(el => {
+      if (el.parentElement !== this.el) return; // not our child!
       let node = el.gridstackNode;
       // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
       if (!node) {