Skip to content

[bug] Fallback doesn't move on iOS when inside shadow root #2464

@marcustyphoon

Description

@marcustyphoon

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions