Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Closed
2 of 6 tasks
sagewall opened this issue Feb 12, 2024 · 6 comments
Closed
2 of 6 tasks

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

sagewall opened this issue Feb 12, 2024 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p0 - emergency User set priority impact status of p0 - emergency
Milestone
2024-02-15 - Feb ...

Comments

@sagewall
Copy link

Check existing issues

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.

calcite.list.drag.bug.mp4

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

  • @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
@sagewall sagewall added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Feb 12, 2024
@github-actions github-actions bot added ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. calcite-components Issues specific to the @esri/calcite-components package. impact - p0 - emergency User set priority impact status of p0 - emergency labels Feb 12, 2024
@sagewall sagewall mentioned this issue Feb 12, 2024
Closed
2 tasks
@driskull
Copy link
Member

@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
Copy link
Member

FrancoCorp™ can provide support later today. 🫡

Excellent sleuthin', @driskull! 🕵️

driskull added a commit that referenced this issue Feb 12, 2024
@driskull
#8728 prototype
f450be1
@driskull
Copy link
Member

@jcfranco created #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
Copy link
Member

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

driskull added a commit that referenced this issue Feb 14, 2024
@driskull
fix: fix sortable fallback styling. #8728
65f1bd2
@driskull driskull mentioned this issue Feb 14, 2024
Merged
driskull added a commit that referenced this issue Feb 14, 2024
@driskull
fix: fix styling when dragging items on a mobile device (#8750)
7c01e6e 
**Related Issue:** #8728

## Summary

- Fixes fallback ghost element styling to not overflow its container.
- adds fallback class for sortable items.
driskull added a commit that referenced this issue Feb 14, 2024
@driskull
fix: fixes sorting using web components in sortable.js. #8728
ec69ff6
@driskull driskull mentioned this issue Feb 14, 2024
Merged
driskull added a commit that referenced this issue Feb 15, 2024
@driskull @jcfranco
fix: fix dragging items on a mobile device (#8751)
dc11612 
**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>
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels Feb 15, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@driskull driskull added estimate - 13 Requires planning and input from team, consider smaller steps. and removed needs triage Planning workflow - pending design/dev review. labels Feb 15, 2024
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 15, 2024
@geospatialem
Copy link
Member

Verified in 2.5.0-next.6:

RPReplay_Final1708011229.MP4

Elijbet pushed a commit that referenced this issue Feb 15, 2024
@driskull @Elijbet
fix: fix styling when dragging items on a mobile device (#8750)
fb75f2b 
**Related Issue:** #8728

## Summary

- Fixes fallback ghost element styling to not overflow its container.
- adds fallback class for sortable items.
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@driskull @jcfranco @Elijbet
fix: fix dragging items on a mobile device (#8751)
bb29058 
**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>
@sagewall sagewall mentioned this issue Jun 5, 2024
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p0 - emergency User set priority impact status of p0 - emergency
Projects
None yet
Milestone
2024-02-15 - Feb Maintenance Release
Development

No branches or pull requests
5 participants
@jcfranco @driskull @sagewall @geospatialem @DitwanP