-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[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
Comments
driskull
added a commit
to driskull/Sortable-shadow-host-fix
that referenced
this issue
Feb 14, 2024
This was referenced Feb 14, 2024
driskull
added a commit
to Esri/calcite-design-system
that referenced
this issue
Feb 15, 2024
**Related Issue:** #8728 ## Summary - Fixes dragging when on a mobile device. - Sortablejs uses fallback code instead of native drag and drop on mobile devices. - Patches `sortablejs` dependency until the fix for the issue is installed and released. SortableJS/Sortable#2346 - Adds and uses the dependency `patch-package` to handle patching the dependency. - Applies the changes listed here: SortableJS/Sortable#2347 --------- Co-authored-by: JC Franco <jfranco@esri.com>
Elijbet
pushed a commit
to Esri/calcite-design-system
that referenced
this issue
Feb 15, 2024
**Related Issue:** #8728 ## Summary - Fixes dragging when on a mobile device. - Sortablejs uses fallback code instead of native drag and drop on mobile devices. - Patches `sortablejs` dependency until the fix for the issue is installed and released. SortableJS/Sortable#2346 - Adds and uses the dependency `patch-package` to handle patching the dependency. - Applies the changes listed here: SortableJS/Sortable#2347 --------- Co-authored-by: JC Franco <jfranco@esri.com>
Thank you, PR has been merged |
Thank you @owen-m1 🍻 |
1 task
@owen-m1 any chance we can get a new release with this fix? |
driskull
added a commit
to Esri/calcite-design-system
that referenced
this issue
Jun 21, 2024
**Related Issue:** #9521 ## Summary - patch sortablejs with the correct update to fix dragging shadow elements on mobile devices - SortableJS/Sortable#2347 SortableJS/Sortable#2346
Thank you @driskull it has been released in 1.15.3 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
forceFallback: true
, and thehandle
or list content is a web component with an open shadowRoot items cannot be dragged.Sortable/src/Sortable.js
Lines 756 to 759 in 07708fa
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
, its returning elements within ourhandle
custom element or content custom element instead of a child of the Sortable instance.forceFallback: true
or when used by a mobile device which seems to always go into fallback mode.To Reproduce
Steps to reproduce the behavior:
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
The text was updated successfully, but these errors were encountered: