fix #1890 exception when draggin fast

adumesny · adumesny · commit f16260f88e63 · 2021-12-21T08:07:34.000-08:00
* also fixed some doc and added test case for another bug
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -65,8 +65,9 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 4.3.1-dev TBD
-* fix [#1785](https://github.com/gridstack/gridstack.js/issue/1785) overlapping items when switching column() and making edits. Thank you [@radovanobal](https://github.com/radovanobal) for sponsoring it.
 * add [#1887](https://github.com/gridstack/gridstack.js/pull/1887) support for IE (new es5 folder) by [@SmileLifeIven](https://github.com/SmileLifeIven)
+* fix [#1785](https://github.com/gridstack/gridstack.js/issue/1785) overlapping items when switching column() and making edits. Thank you [@radovanobal](https://github.com/radovanobal) for sponsoring it.
+* fix [#1890](https://github.com/gridstack/gridstack.js/issue/1890) unhandled exception when dragging fast between grids.
 
 ## 4.3.1 (2021-10-18)
 * fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize
diff --git a/spec/e2e/html/1858_full_grid_overlap.html b/spec/e2e/html/1858_full_grid_overlap.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>1858</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Full grid, drag 0 out and back in - see 1858</h1>
+    <div class="grid-stack"></div>
+  </div>
+  <script type="text/javascript">
+    options = {
+      disableOneColumnMode: true,
+      row: 15,
+      margin: 2,
+      cellHeight: 20,
+      acceptWidgets: true,
+      float: false,
+    };
+
+    GridStack.init(options).load([
+      { x: 0, y: 0, w: 4, h: 6, content:'0' },
+      { x: 0, y: 6, w: 4, h: 2, content:'1' },
+      { x: 0, y: 8, w: 4, h: 2, content:'2' },
+      { x: 0, y: 10, w: 4, h: 2, content:'3' },
+      { x: 0, y: 12, w: 12, h: 3, content:'4' },
+      { x: 4, y: 0, w: 8, h: 12, content:'5' },
+    ])
+  </script>
+</body>
+</html>
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -128,7 +128,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
       accept: (el: GridItemHTMLElement) => {
         let node: GridStackNode = el.gridstackNode;
         // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
-        if (node && node.grid === this) return true;
+        if (node?.grid === this) return true;
         if (!this.opts.acceptWidgets) return false;
         // check for accept method or class matching
         let canAccept = true;
@@ -152,13 +152,13 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
     .on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
       let node = el.gridstackNode;
       // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
-      if (node && node.grid === this && !node._temporaryRemoved) {
+      if (node?.grid === this && !node._temporaryRemoved) {
         // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
         return false; // prevent parent from receiving msg (which may be a grid as well)
       }
 
       // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
-      if (node && node.grid && node.grid !== this && !node._temporaryRemoved) {
+      if (node?.grid && node.grid !== this && !node._temporaryRemoved) {
         // TEST console.log('dropover without leave');
         let otherGrid = node.grid;
         otherGrid._leave(el, helper);
@@ -214,6 +214,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
      */
     .on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
       let node = el.gridstackNode;
+      if (!node) return false;
       // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
       // so skip this one if we're not the active grid really..
       if (!node.grid || node.grid === this) {
@@ -227,7 +228,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
     .on(this.el, 'drop', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
       let node = el.gridstackNode;
       // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
-      if (node && node.grid === this && !node._isExternal) return false;
+      if (node?.grid === this && !node._isExternal) return false;
 
       let wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
       this.placeholder.remove();
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -322,6 +322,7 @@ export class GridStack {
         this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
         cbNodes.forEach(n => {
           let el = n.el;
+          if (!el) return;
           if (n._removeDOM) {
             if (el) el.remove();
             delete n._removeDOM;
diff --git a/src/types.ts b/src/types.ts
@@ -243,7 +243,7 @@ export interface GridStackWidget extends GridStackPosition {
   noResize?: boolean;
   /** prevents moving (default?: undefined = un-constrained) */
   noMove?: boolean;
-  /** prevents moving and resizing (default?: undefined = un-constrained) */
+  /** prevents being moved by others during their (default?: undefined = un-constrained) */
   locked?: boolean;
   /** widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option */
   resizeHandles?: string;
