[bug] Sortable swapping does not work when forceFallback is enabled and a handle or content is a custom element (web component) with a shadowRoot

driskull commented 9 months ago

Describe the bug

When in forceFallback: true, and the handle or list content is a web component with an open shadowRoot items cannot be dragged.
In our usage, our handle element is another custom element with shadowRoot and the content within a sortable element is also a custom element.
The code problem area is seen in this section: https://github.com/SortableJS/Sortable/blob/07708fa1e7d9cf9d4563a7b1a09f7a47771522ed/src/Sortable.js#L756-L759
With this line target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);, its returning elements within our handle custom element or content custom element instead of a child of the Sortable instance.
This only happens when in forceFallback: true or when used by a mobile device which seems to always go into fallback mode.
When using native drag and drop the issue is not seen.

To Reproduce Steps to reproduce the behavior:

Go to https://codepen.io/driskull/pen/OJqrzVL?editors=1010
Try to drag a handle over another handle and notice it won't swap elements
Drag a handle over a list element textContent and notice it does swap
If there are other custom-elements inside the list-element in place of the text content elements won't swap either.
See sample: https://codepen.io/driskull/pen/xxBmpra?editors=0110

Expected behavior

I would expect sort swapping to work when a handle or content within a list is a custom element.

Information

sortablejs = ^1.15.1 @types/sortablejs = ^1.15.1

Additional context I have a PR open to fix this but need verification that it is the best approach to fixing the issue.

Reproduction codesandbox: https://codepen.io/driskull/pen/OJqrzVL?editors=1010 and https://codepen.io/driskull/pen/xxBmpra?editors=0110

Pull Request Fix

https://github.com/SortableJS/Sortable/pull/2347