Merge pull request #2083 from adumesny/master

fix removeWidget() after it's gone from DOM

Author: adumesny

demo/serialization.html

@@ -44,39 +44,45 @@ <h1>Serialization demo</h1>
       {x: 1, y: 3, id: '4'}
     ];
     serializedData.forEach((n, i) =>
-      n.content = `<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`);
+      n.content = `<button onClick="removeWidget(this.parentElement.parentElement)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`);
     let serializedFull;
 
     // 2.x method - just saving list of widgets with content (default)
-    loadGrid = function() {
+    function loadGrid() {
       grid.load(serializedData, true); // update things
     }
 
     // 2.x method
-    saveGrid = function() {
+    function saveGrid() {
       delete serializedFull;
       serializedData = grid.save();
       document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
     }
 
     // 3.1 full method saving the grid options + children (which is recursive for nested grids)
-    saveFullGrid = function() {
+    function saveFullGrid() {
       serializedFull = grid.save(true, true);
       serializedData = serializedFull.children;
       document.querySelector('#saved-data').value = JSON.stringify(serializedFull, null, '  ');
     }
 
     // 3.1 full method to reload from scratch - delete the grid and add it back from JSON
-    loadFullGrid = function() {
+    function loadFullGrid() {
       if (!serializedFull) return;
       grid.destroy(true); // nuke everything
       grid = GridStack.addGrid(document.querySelector('#gridCont'), serializedFull)
     }
 
-    clearGrid = function() {
+    function clearGrid() {
       grid.removeAll();
     }
 
+    function removeWidget(el) {
+      // TEST removing from DOM first like Angular/React/Vue would do
+      el.remove();
+      grid.removeWidget(el, false);
+    }
+
     loadGrid();
   </script>
 </body>

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/)*
 
+- [7.0.2 (TBD)](#702-tbd)
 - [7.0.1 (2022-10-14)](#701-2022-10-14)
 - [7.0.0 (2022-10-09)](#700-2022-10-09)
 - [6.0.3 (2022-10-08)](#603-2022-10-08)
@@ -74,6 +75,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 7.0.2 (TBD)
+* fixed [#2081](https://github.com/gridstack/gridstack.js/issues/2081) removeWidget() after it's gone from DOM
+
 ## 7.0.1 (2022-10-14)
 * fixed [#2073](https://github.com/gridstack/gridstack.js/issues/2073) SSR (server side rendering) isTouch issue (introduced in v6)
 * fixed - removing last item delete sub-grid that are not auto-generated (nested.html vs nested_advanced.html)

src/dd-touch.ts

@@ -10,7 +10,7 @@ import { DDManager } from './dd-manager';
  * should we use this instead ? (what we had for always showing resize handles)
  * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  */
-export const isTouch: boolean = typeof window !== 'undefined' && typeof document !== 'undefined' && 
+export const isTouch: boolean = typeof window !== 'undefined' && typeof document !== 'undefined' &&
 ( 'ontouchstart' in document
   || 'ontouchstart' in window
   // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this

src/gridstack.ts

@@ -1010,7 +1010,7 @@ export class GridStack {
    */
   public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack {
     GridStack.getElements(els).forEach(el => {
-      if (el.parentElement !== this.el) return; // not our child!
+      if (el.parentElement && 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) {