Skip to content

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

Closed
@driskull

Description

@driskull

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:

    Sortable/src/Sortable.js

    Lines 756 to 759 in 07708fa

    while (target && target.shadowRoot) {
    target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
    if (target === parent) break;
    parent = target;
  • 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:

  1. Go to https://codepen.io/driskull/pen/OJqrzVL?editors=1010
  2. Try to drag a handle over another handle and notice it won't swap elements
  3. Drag a handle over a list element textContent and notice it does swap
  4. If there are other custom-elements inside the list-element in place of the text content elements won't swap either.
  5. 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

#2347

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