svelte-dnd-action 0.9.15 → 0.9.18

package/dist/index.js

@@ -1054,6 +1054,54 @@
     resetScrolling$1();
   }
 
+  /**
+   * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+   * Since svelte manages select value internally.
+   * @see https://github.com/sveltejs/svelte/issues/6717
+   * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+   * 
+   * @param {HTMLElement} el 
+   * @returns 
+   */
+  function svelteNodeClone(el) {
+    var cloned = el.cloneNode(true);
+    var values = [];
+    var elIsSelect = el.tagName === "SELECT";
+    var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+    var _iterator = _createForOfIteratorHelper(selects),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _select = _step.value;
+        values.push(_select.value);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    if (selects.length <= 0) {
+      return cloned;
+    }
+
+    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+    for (var i = 0; i < clonedSelects.length; i++) {
+      var select = clonedSelects[i];
+      var value = values[i];
+      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+      if (optionEl) {
+        optionEl.setAttribute('selected', true);
+      }
+    }
+
+    return cloned;
+  }
+
   var TRANSITION_DURATION_SECONDS = 0.2;
   /**
    * private helper function - creates a transition string for a property
@@ -1074,7 +1122,7 @@
 
   function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     var rect = originalElement.getBoundingClientRect();
-    var draggedEl = originalElement.cloneNode(true);
+    var draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";
@@ -1187,7 +1235,7 @@
    * @param {HTMLElement} dragTarget
    */
 
-  function hideOriginalDragTarget(dragTarget) {
+  function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";
@@ -1290,7 +1338,8 @@
   var isWorkingOnPreviousDrag = false;
   var finalizingPreviousDrag = false;
   var unlockOriginDzMinDimensions;
-  var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+  var isDraggedOutsideOfAnyDz = false;
+  var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
   var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1626,12 +1675,37 @@
     draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
     window.setTimeout(callback, dropAnimationDurationMs);
   }
+
+  function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({
+      dz: dz,
+      destroy: destroy
+    });
+    window.requestAnimationFrame(function () {
+      hideElement(dz);
+      document.body.appendChild(dz);
+    });
+  }
   /* cleanup */
 
 
   function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+
+    if (scheduledForRemovalAfterDrop.length) {
+      printDebug(function () {
+        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+      });
+      scheduledForRemovalAfterDrop.forEach(function (_ref) {
+        var dz = _ref.dz,
+            destroy = _ref.destroy;
+        destroy();
+        dz.remove();
+      });
+      scheduledForRemovalAfterDrop = [];
+    }
+
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -1649,6 +1723,7 @@
   }
 
   function dndzone(node, options) {
+    var initialized = false;
     var config = {
       items: undefined,
       type: undefined,
@@ -1778,7 +1853,7 @@
 
           draggedEl.focus();
           watchDraggedElement();
-          hideOriginalDragTarget(originalDragTarget);
+          hideElement(originalDragTarget);
           originDropZoneRoot.appendChild(originalDragTarget);
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1817,27 +1892,27 @@
       });
     }
 
-    function configure(_ref) {
-      var _ref$items = _ref.items,
-          items = _ref$items === void 0 ? undefined : _ref$items,
-          _ref$flipDurationMs = _ref.flipDurationMs,
-          dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-          _ref$type = _ref.type,
-          newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-          _ref$dragDisabled = _ref.dragDisabled,
-          dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-          _ref$morphDisabled = _ref.morphDisabled,
-          morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-          _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-          dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-          _ref$dropTargetStyle = _ref.dropTargetStyle,
-          dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-          _ref$dropTargetClasse = _ref.dropTargetClasses,
-          dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-          _ref$transformDragged = _ref.transformDraggedElement,
-          transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-          _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-          centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+    function configure(_ref2) {
+      var _ref2$items = _ref2.items,
+          items = _ref2$items === void 0 ? undefined : _ref2$items,
+          _ref2$flipDurationMs = _ref2.flipDurationMs,
+          dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+          _ref2$type = _ref2.type,
+          newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+          _ref2$dragDisabled = _ref2.dragDisabled,
+          dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+          _ref2$morphDisabled = _ref2.morphDisabled,
+          morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+          _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+          dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+          _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+          dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+          _ref2$dropTargetClass = _ref2.dropTargetClasses,
+          dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+          _ref2$transformDragge = _ref2.transformDraggedElement,
+          transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+          _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+          centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
       config.dropAnimationDurationMs = dropAnimationDurationMs;
 
       if (config.type && newType !== config.type) {
@@ -1852,7 +1927,7 @@
       config.transformDraggedElement = transformDraggedElement;
       config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-      if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+      if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
         styleInactiveDropZones([node], function () {
           return config.dropTargetStyle;
         }, function () {
@@ -1872,7 +1947,7 @@
         return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
       }
 
-      if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+      if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
         if (dropFromOthersDisabled) {
           styleInactiveDropZones([node], function (dz) {
             return getConfigProp(dz, "dropTargetStyle");
@@ -1918,6 +1993,10 @@
 
 
         elToIdx.set(draggableEl, idx);
+
+        if (!initialized) {
+          initialized = true;
+        }
       };
 
       for (var idx = 0; idx < node.children.length; idx++) {
@@ -1936,11 +2015,22 @@
         configure(newOptions);
       },
       destroy: function destroy() {
-        printDebug(function () {
-          return "pointer dndzone will destroy";
-        });
-        unregisterDropZone(node, config.type);
-        dzToConfig["delete"](node);
+        function destroyDz() {
+          printDebug(function () {
+            return "pointer dndzone will destroy";
+          });
+          unregisterDropZone(node, dzToConfig.get(node).type);
+          dzToConfig["delete"](node);
+        }
+
+        if (isWorkingOnPreviousDrag) {
+          printDebug(function () {
+            return "pointer dndzone will be scheduled for destruction";
+          });
+          scheduleDZForRemovalAfterDrop(node, destroyDz);
+        } else {
+          destroyDz();
+        }
       }
     };
   }

package/dist/index.mjs

@@ -1048,6 +1048,54 @@ function disarmWindowScroller() {
   resetScrolling$1();
 }
 
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+function svelteNodeClone(el) {
+  var cloned = el.cloneNode(true);
+  var values = [];
+  var elIsSelect = el.tagName === "SELECT";
+  var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+  var _iterator = _createForOfIteratorHelper(selects),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _select = _step.value;
+      values.push(_select.value);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+  for (var i = 0; i < clonedSelects.length; i++) {
+    var select = clonedSelects[i];
+    var value = values[i];
+    var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}
+
 var TRANSITION_DURATION_SECONDS = 0.2;
 /**
  * private helper function - creates a transition string for a property
@@ -1068,7 +1116,7 @@ function trs(property) {
 
 function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   var rect = originalElement.getBoundingClientRect();
-  var draggedEl = originalElement.cloneNode(true);
+  var draggedEl = svelteNodeClone(originalElement);
   copyStylesFromTo(originalElement, draggedEl);
   draggedEl.id = DRAGGED_ELEMENT_ID;
   draggedEl.style.position = "fixed";
@@ -1181,7 +1229,7 @@ function styleDraggable(draggableEl, dragDisabled) {
  * @param {HTMLElement} dragTarget
  */
 
-function hideOriginalDragTarget(dragTarget) {
+function hideElement(dragTarget) {
   dragTarget.style.display = "none";
   dragTarget.style.position = "fixed";
   dragTarget.style.zIndex = "-5";
@@ -1284,7 +1332,8 @@ var currentMousePosition;
 var isWorkingOnPreviousDrag = false;
 var finalizingPreviousDrag = false;
 var unlockOriginDzMinDimensions;
-var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+var isDraggedOutsideOfAnyDz = false;
+var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
 var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1620,12 +1669,37 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
   draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
   window.setTimeout(callback, dropAnimationDurationMs);
 }
+
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+  scheduledForRemovalAfterDrop.push({
+    dz: dz,
+    destroy: destroy
+  });
+  window.requestAnimationFrame(function () {
+    hideElement(dz);
+    document.body.appendChild(dz);
+  });
+}
 /* cleanup */
 
 
 function cleanupPostDrop() {
   draggedEl.remove();
   originalDragTarget.remove();
+
+  if (scheduledForRemovalAfterDrop.length) {
+    printDebug(function () {
+      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+    });
+    scheduledForRemovalAfterDrop.forEach(function (_ref) {
+      var dz = _ref.dz,
+          destroy = _ref.destroy;
+      destroy();
+      dz.remove();
+    });
+    scheduledForRemovalAfterDrop = [];
+  }
+
   draggedEl = undefined;
   originalDragTarget = undefined;
   draggedElData = undefined;
@@ -1643,6 +1717,7 @@ function cleanupPostDrop() {
 }
 
 function dndzone(node, options) {
+  var initialized = false;
   var config = {
     items: undefined,
     type: undefined,
@@ -1772,7 +1847,7 @@ function dndzone(node, options) {
 
         draggedEl.focus();
         watchDraggedElement();
-        hideOriginalDragTarget(originalDragTarget);
+        hideElement(originalDragTarget);
         originDropZoneRoot.appendChild(originalDragTarget);
       } else {
         window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1811,27 +1886,27 @@ function dndzone(node, options) {
     });
   }
 
-  function configure(_ref) {
-    var _ref$items = _ref.items,
-        items = _ref$items === void 0 ? undefined : _ref$items,
-        _ref$flipDurationMs = _ref.flipDurationMs,
-        dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-        _ref$type = _ref.type,
-        newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-        _ref$dragDisabled = _ref.dragDisabled,
-        dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-        _ref$morphDisabled = _ref.morphDisabled,
-        morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-        _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-        _ref$dropTargetStyle = _ref.dropTargetStyle,
-        dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-        _ref$dropTargetClasse = _ref.dropTargetClasses,
-        dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-        _ref$transformDragged = _ref.transformDraggedElement,
-        transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-        _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-        centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+  function configure(_ref2) {
+    var _ref2$items = _ref2.items,
+        items = _ref2$items === void 0 ? undefined : _ref2$items,
+        _ref2$flipDurationMs = _ref2.flipDurationMs,
+        dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+        _ref2$type = _ref2.type,
+        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+        _ref2$dragDisabled = _ref2.dragDisabled,
+        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+        _ref2$morphDisabled = _ref2.morphDisabled,
+        morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+        _ref2$dropTargetClass = _ref2.dropTargetClasses,
+        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+        _ref2$transformDragge = _ref2.transformDraggedElement,
+        transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+        _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
     config.dropAnimationDurationMs = dropAnimationDurationMs;
 
     if (config.type && newType !== config.type) {
@@ -1846,7 +1921,7 @@ function dndzone(node, options) {
     config.transformDraggedElement = transformDraggedElement;
     config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-    if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+    if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
       styleInactiveDropZones([node], function () {
         return config.dropTargetStyle;
       }, function () {
@@ -1866,7 +1941,7 @@ function dndzone(node, options) {
       return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
     }
 
-    if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+    if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
       if (dropFromOthersDisabled) {
         styleInactiveDropZones([node], function (dz) {
           return getConfigProp(dz, "dropTargetStyle");
@@ -1912,6 +1987,10 @@ function dndzone(node, options) {
 
 
       elToIdx.set(draggableEl, idx);
+
+      if (!initialized) {
+        initialized = true;
+      }
     };
 
     for (var idx = 0; idx < node.children.length; idx++) {
@@ -1930,11 +2009,22 @@ function dndzone(node, options) {
       configure(newOptions);
     },
     destroy: function destroy() {
-      printDebug(function () {
-        return "pointer dndzone will destroy";
-      });
-      unregisterDropZone(node, config.type);
-      dzToConfig["delete"](node);
+      function destroyDz() {
+        printDebug(function () {
+          return "pointer dndzone will destroy";
+        });
+        unregisterDropZone(node, dzToConfig.get(node).type);
+        dzToConfig["delete"](node);
+      }
+
+      if (isWorkingOnPreviousDrag) {
+        printDebug(function () {
+          return "pointer dndzone will be scheduled for destruction";
+        });
+        scheduleDZForRemovalAfterDrop(node, destroyDz);
+      } else {
+        destroyDz();
+      }
     }
   };
 }

package/package.json

@@ -40,7 +40,7 @@
         "dist"
     ],
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.15",
+    "version": "0.9.18",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/styler.js

@@ -1,5 +1,6 @@
 import {SHADOW_ELEMENT_ATTRIBUTE_NAME, DRAGGED_ELEMENT_ID} from "../constants";
 import {findCenter} from "./intersection";
+import { svelteNodeClone } from "./svelteNodeClone";
 
 const TRANSITION_DURATION_SECONDS = 0.2;
 
@@ -19,7 +20,7 @@ function trs(property) {
  */
 export function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     const rect = originalElement.getBoundingClientRect();
-    const draggedEl = originalElement.cloneNode(true);
+    const draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";
@@ -135,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";

package/src/helpers/svelteNodeClone.js

@@ -0,0 +1,35 @@
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+export function svelteNodeClone(el) {
+  const cloned = el.cloneNode(true);
+
+  const values = [];
+  const elIsSelect = el.tagName === "SELECT";
+  const selects = elIsSelect ? [el] : [...el.querySelectorAll('select')];
+  for (const select of selects) {
+    values.push(select.value);
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  const clonedSelects = elIsSelect ? [cloned] : [...cloned.querySelectorAll('select')];
+  for (let i = 0; i < clonedSelects.length; i++) {
+    const select = clonedSelects[i];
+    const value = values[i];
+    const optionEl = select.querySelector(`option[value="${value}"`);
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}

package/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;
@@ -301,6 +317,7 @@ function cleanupPostDrop() {
 }
 
 export function dndzone(node, options) {
+    let initialized = false;
     const config = {
         items: undefined,
         type: undefined,
@@ -397,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);
@@ -442,7 +459,6 @@ export function dndzone(node, options) {
         }
         config.type = newType;
         registerDropZone(node, newType);
-
         config.items = [...items];
         config.dragDisabled = dragDisabled;
         config.morphDisabled = morphDisabled;
@@ -451,6 +467,7 @@ export function dndzone(node, options) {
 
         // realtime update for dropTargetStyle
         if (
+            initialized &&
             isWorkingOnPreviousDrag &&
             !finalizingPreviousDrag &&
             (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) ||
@@ -474,7 +491,7 @@ export function dndzone(node, options) {
         function getConfigProp(dz, propName) {
             return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
         }
-        if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+        if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
             if (dropFromOthersDisabled) {
                 styleInactiveDropZones(
                     [node],
@@ -514,6 +531,10 @@ export function dndzone(node, options) {
             }
             // updating the idx
             elToIdx.set(draggableEl, idx);
+
+            if (!initialized) {
+                initialized = true;
+            }
         }
     }
     configure(options);
@@ -524,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();
+            }
         }
     };
 }