Describe the bug
If SortableJS is applied to an element inside of any shadow root, with forceFallback: true, on iOS only, the fallback element will not move with the drag cursor/touch.
On investigation, this is caused by PositionGhostAbsolutely being true (which is iOS-specific), causing getRelativeScrollOffset to be used, which recursively walks up the DOM tree adding up the scroll offsets. If a shadow root is one of these nodes, scrollLeft is undefined and the whole thing returns NaN.
To my knowledge, this is a oneliner fix (scrollLeft/scrollTop are only on elements, so this shouldn't normally process non-element parent nodes):
diff --git a/src/lib/sortable.esm.js b/src/lib/sortable.esm.js
index 824d4814..68f07a0e 100755
--- a/src/lib/sortable.esm.js
+++ b/src/lib/sortable.esm.js
@@ -433,7 +433,7 @@ function getRelativeScrollOffset(el) {
scaleY = elMatrix.d;
offsetLeft += el.scrollLeft * scaleX;
offsetTop += el.scrollTop * scaleY;
- } while (el !== winScroller && (el = el.parentNode));
+ } while (el !== winScroller && (el = el.parentElement ?? el.parentNode?.host));
}
return [offsetLeft, offsetTop];
}
Related issue: #2128.
To Reproduce
Steps to reproduce the behavior:
Open https://7p98t2.csb.app/ on iOS. Drag the first section.
Expected behavior
Information
Versions - Look in your package.json for this information:
sortablejs = 1.15.6
@types/sortablejs = n/a
Additional context
Add any other context about the problem here.
Reproduction
codesandbox: https://codesandbox.io/p/devbox/recursing-dijkstra-7p98t2
Describe the bug
If SortableJS is applied to an element inside of any shadow root, with forceFallback: true, on iOS only, the fallback element will not move with the drag cursor/touch.
On investigation, this is caused by
PositionGhostAbsolutelybeing true (which is iOS-specific), causinggetRelativeScrollOffsetto be used, which recursively walks up the DOM tree adding up the scroll offsets. If a shadow root is one of these nodes, scrollLeft is undefined and the whole thing returns NaN.To my knowledge, this is a oneliner fix (scrollLeft/scrollTop are only on elements, so this shouldn't normally process non-element parent nodes):
Related issue: #2128.
To Reproduce
Steps to reproduce the behavior:
Open https://7p98t2.csb.app/ on iOS. Drag the first section.
Expected behavior
Information
Versions - Look in your
package.jsonfor this information:sortablejs = 1.15.6
@types/sortablejs = n/a
Additional context
Add any other context about the problem here.
Reproduction
codesandbox: https://codesandbox.io/p/devbox/recursing-dijkstra-7p98t2