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 with nested lists #9521

Closed
2 of 6 tasks
sagewall opened this issue Jun 5, 2024 · 14 comments
Closed
2 of 6 tasks

[list] - unable to drag and drop list items successfully with nested lists #9521

sagewall opened this issue Jun 5, 2024 · 14 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Experience Builder Issues logged by ArcGIS Experience Builder team members ArcGIS Instant Apps Issues logged by ArcGIS Instant Apps team members. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. 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. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Milestone
2024-06-25 - Jun ...

Comments

@sagewall
Copy link

sagewall commented Jun 5, 2024 •
edited by geospatialem
Loading

Check existing issues

Actual Behavior

When a list contains another list in a list-item and drag-enabled is true the list items fail to move as expected and the list becomes unresponsive when an item is dragged.

I think this was previously partially addressed with #8728 but the fix perhaps didn't address nested list items.

Expected Behavior

The drag and drop behavior works on mobile devices using touch gestures with nested lists.

Reproduction Sample

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

Reproduction Steps

  1. Open this codepen on a mobile device
  2. Expand the "Nested List Item"
  3. Try to drag and drop any of the list items
  4. Observe how the list becomes unresponsive or the list items fail to move

Reproduction Version

2.8.3 and 2.9.0

Relevant Info

Pixel 7, Chrome

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

This impacts the LayerList, BasemapLayerList, and TableList Javascript SDK widgets and the applications that use them like Map Viewer, Experience Builder and Instant Apps.

Also identified as a bug via BUG-000167708.

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 Jun 5, 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 - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Jun 5, 2024
@driskull
Copy link
Member

driskull commented Jun 5, 2024

@jcfranco when we patched sortable, we patched it with my assumed fix but not the correct fix that went into Sortable. We may need to re-patch.

@driskull
Copy link
Member

driskull commented Jun 5, 2024

Correct patch: https://github.com/SortableJS/Sortable/pull/2347/files

incorrect patch: https://github.com/Esri/calcite-design-system/blob/e26fce6c0a7fb3f37fd084176e8846e135df295b/patches/sortablejs%2B1.15.1.patch

driskull added a commit that referenced this issue Jun 6, 2024
@driskull
fix: set the correct parent when within a shadowRoot #9521
4ad0f92
@driskull driskull mentioned this issue Jun 6, 2024
Merged
@driskull
Copy link
Member

driskull commented Jun 6, 2024

I can't reproduce this on my iphone or iphone simulator. Is it only on chrome on Pixel 7? Or can it be reproduced on an ios device?

@geospatialem
Copy link
Member

I can't reproduce this on my iphone or iphone simulator. Is it only on chrome on Pixel 7? Or can it be reproduced on an ios device?

@driskull In this example if you try to drag the nested item (the third item) containing additional nested items I was able to verify on my iPhone in Chrome:

IMG_0953.MP4

@driskull
Copy link
Member

driskull commented Jun 6, 2024

I can reproduce it in the codepen, even using chrome devtools with a mobile device enabled but I can't reproduce it with a local build.

@driskull
Copy link
Member

driskull commented Jun 6, 2024

@jcfranco I can't reproduce it when the local server is running. However, If I do a build and copy the dist files I can reproduce it. Any ideas on why that might be? Some sort of minify or patch problem?

@geospatialem geospatialem added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Jun 7, 2024
@geospatialem geospatialem added this to the 2024-06-25 - Jun Release milestone Jun 7, 2024
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. p - medium Issue is non core or affecting less that 60% of people using the library ArcGIS Experience Builder Issues logged by ArcGIS Experience Builder team members ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. ArcGIS Instant Apps Issues logged by ArcGIS Instant Apps team members. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 7, 2024
@driskull
Copy link
Member

Managed to reproduce and debug from a built copy. PR will be incoming shortly.

driskull added a commit that referenced this issue Jun 13, 2024
@driskull
fix(list): fixes mobile device dragging with nested lists. #9521
7f31dfe
@driskull driskull mentioned this issue Jun 13, 2024
Merged
driskull added a commit that referenced this issue Jun 17, 2024
@driskull
fix(list): fix mobile device dragging with nested lists (#9573)
6f466aa 
**Related Issue:** #9521

## Summary

- Makes sure that `connectSortableComponent` isn't called during an
active drag of a sortable item.
- Previously, mutation observers were calling `connectSortableComponent`
during a drag
- This caused the existing implementation to be destroyed and a new one
created which left the user in a frozen state.
- This only occurred on mobile devices because mobile devices do not use
native drag and drop with Sortable.js
- The fix makes sure that `connectSortableComponent` and
`disconnectSortableComponent` do nothing during an active drag.
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 17, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Jun 17, 2024
@geospatialem
Copy link
Member

Verified in 2.10.0-next.2 on iOS with Chrome:

verify.MP4

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. 4 - verified Issues that have been released and confirmed resolved. labels Jun 20, 2024
@geospatialem
Copy link
Member

Re-opening the above to mitigate the third party library recommended approach.

@geospatialem geospatialem reopened this Jun 20, 2024
driskull added a commit that referenced this issue Jun 21, 2024
@driskull
fix: set the correct Sortable parent when within a shadowRoot (#9532)
13f3bf0 
**Related Issue:** #9521

## Summary

- patch sortablejs with the correct update to fix dragging shadow
elements on mobile devices
- SortableJS/Sortable#2347
SortableJS/Sortable#2346
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jun 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Jun 21, 2024
@geospatialem
Copy link
Member

Verified in 2.10.0-next.7 🎉

@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 Jun 24, 2024
@sagewall
Copy link
Author

@geospatialem I think there may still be an issue with Android devices. iOS may be okay but I'm seeing issues on my personal pixel 7 phone and multiple browserstack android phones using version 2.10.1

screenRecording-11-7-2024-17-13.mp4

@geospatialem
Copy link
Member

@sagewall Thanks for reporting! @DitwanP can you work with Sage on creating a new related issue to tackle? Since its specific to Android devices, we'll need to determine the priority with the upcoming R3 release.

@DitwanP DitwanP mentioned this issue Jul 12, 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 Experience Builder Issues logged by ArcGIS Experience Builder team members ArcGIS Instant Apps Issues logged by ArcGIS Instant Apps team members. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. 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. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Projects
None yet
Milestone
2024-06-25 - Jun Release
Development

No branches or pull requests
4 participants
@driskull @sagewall @geospatialem @DitwanP