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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions