svelte-dnd-action 0.9.16 → 0.9.17

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";

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";

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.16",
+    "version": "0.9.17",
     "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";

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;
+}