[list] - unable to drag and drop list items successfully on mobile devices with drag-enabled

[sagewall]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

Unable to drag and drop a list item in a list with drag-enabled on mobile devices or when browser developer tools are set to mimic a mobile device. This is impacting the ArcGIS Maps SDK for JavaScript LayerList widget and all the applications that use it.

cc @driskull @geospatialem

Expected Behavior

It's expected to be able to move list items on mobile devices using touch gestures.

Reproduction Sample

https://codepen.io/sagewall/pen/eYXQpmz

Reproduction Steps

1. Open this codepen: https://codepen.io/sagewall/pen/eYXQpmz using a mobile device
2. Switch to a full screen view
3. Try and move a list item in the list

As an alternative, the same behavior exists when opening the codepen and using the toggle device bar to switch to a mobile device in the chrome developers tools.

https://github.com/Esri/calcite-design-system/assets/2636825/5829e906-4fc4-40cd-ba9c-ca3950edd021

Reproduction Version

2.4.0

Relevant Info

No response

Regression?

No response

Priority impact

p0 - emergency

Impact

Preventing Map Viewer, Experience Builder, Instant Apps and custom applications using the ArcGIS Maps SDK for JavaScript LayerList widget from having drag-enabled layer lists on mobile devices.

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[driskull]

@jcfranco would FrancoCorp™️ have any time to help debug this one?

What i've uncovered is that it seems like when in responsive mode the Sortable.js appears to go away from native browser DnD and use the fallback SortableJS logic. However, that logic isn't working. I'm not sure why, it might just not work with web components or something along those lines.

I'm able to reproduce the same "non working" behavior if I set the forceFallback option to true. It appears like SortableJS just always uses fallback mode when on a mobile device as seen here: https://github.com/SortableJS/Sortable/blob/07708fa1e7d9cf9d4563a7b1a09f7a47771522ed/modular/sortable.esm.js#L926C3-L926C19

[jcfranco]

FrancoCorp™ can provide support later today. 🫡

Excellent sleuthin', @driskull! 🕵️

[driskull]

@jcfranco created https://github.com/Esri/calcite-design-system/pull/8730 for testing.

It looks like if padding is added for visual spacing between the list-items (or any dragging items) then it works fine. I'm not sure why the fallback dragging requires this spacing though. Obviously this would affect the design.

[driskull]

Sorting is also an issue with the block and value-list components when the forceFallback option is true or used on a mobile device.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 2.5.0-next.6:

https://github.com/Esri/calcite-design-system/assets/5023024/76088704-e3d1-4f38-af51-2044332783e0