362 - fix: if a dropzone is destroyed during drag, it is kept in the …

…DOM (hidden) until a drop takes place to prevent mid drag errors
isaacHagoel · Mar 22, 2022 · b8e9b91 · b8e9b91
1 parent 80bd3a3
commit b8e9b91
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/helpers/styler.js b/src/helpers/styler.js
@@ -136,7 +136,7 @@ export function styleDraggable(draggableEl, dragDisabled) {
  * Hides the provided element so that it can stay in the dom without interrupting
  * @param {HTMLElement} dragTarget
  */
-export function hideOriginalDragTarget(dragTarget) {
+export function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";

diff --git a/src/pointerAction.js b/src/pointerAction.js
@@ -13,7 +13,7 @@ import {armWindowScroller, disarmWindowScroller} from "./helpers/windowScroller"
 import {
     createDraggedElementFrom,
     decorateShadowEl,
-    hideOriginalDragTarget,
+    hideElement,
     morphDraggedElementToBeLike,
     moveDraggedElementToWasDroppedState,
     preventShrinking,
@@ -55,6 +55,7 @@ let isWorkingOnPreviousDrag = false;
 let finalizingPreviousDrag = false;
 let unlockOriginDzMinDimensions;
 let isDraggedOutsideOfAnyDz = false;
+let scheduledForRemovalAfterDrop = [];
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -280,10 +281,25 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
     window.setTimeout(callback, dropAnimationDurationMs);
 }
 
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({dz, destroy});
+    window.requestAnimationFrame(() => {
+        hideElement(dz);
+        document.body.appendChild(dz);
+    });
+}
 /* cleanup */
 function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+    if (scheduledForRemovalAfterDrop.length) {
+        printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
+        scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
+            destroy();
+            dz.remove();
+        })
+        scheduledForRemovalAfterDrop = [];
+    }
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -398,7 +414,7 @@ export function dndzone(node, options) {
                 // to prevent the outline from disappearing
                 draggedEl.focus();
                 watchDraggedElement();
-                hideOriginalDragTarget(originalDragTarget);
+                hideElement(originalDragTarget);
                 originDropZoneRoot.appendChild(originalDragTarget);
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
@@ -529,9 +545,17 @@ export function dndzone(node, options) {
             configure(newOptions);
         },
         destroy: () => {
-            printDebug(() => "pointer dndzone will destroy");
-            unregisterDropZone(node, config.type);
-            dzToConfig.delete(node);
+            function destroyDz() {
+                printDebug(() => "pointer dndzone will destroy");
+                unregisterDropZone(node, dzToConfig.get(node).type);
+                dzToConfig.delete(node);
+            }
+            if (isWorkingOnPreviousDrag) {
+                printDebug(() => "pointer dndzone will be scheduled for destruction");
+                scheduleDZForRemovalAfterDrop(node, destroyDz);
+            } else {
+               destroyDz();
+            }
         }
     };
 }