search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
281 stars 77 forks source link

List: Can't drag and drop list items successfully with nested lists (Potentially Android only) #9764

Open DitwanP opened 2 months ago

DitwanP commented 2 months ago

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.

There was a fix for this recently that seems to only have resolved it for iOS devices. #9521

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

Browserstack repro on Galaxy s23 using Chrome

https://private-user-images.githubusercontent.com/2636825/348023582-cace8736-b729-436d-b4dd-5bc522c7dcb4.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA4MDI5NzQsIm5iZiI6MTcyMDgwMjY3NCwicGF0aCI6Ii8yNjM2ODI1LzM0ODAyMzU4Mi1jYWNlODczNi1iNzI5LTQzNmQtYjRkZC01YmM1MjJjN2RjYjQubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTJUMTY0NDM0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2Y2ZTFiN2ZmODdlM2E3ZWI1MTI1ZGRiNTUwMzIxNGE1OGQ0OWRhOTc3YmVhOGY3OGZmZjJhNTEwZjE2Y2ExMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.sK2vhjOB2de5vvPPH9ttZZVGlHU2_E87xfvjt_x89Uk

Reproduction Steps

  1. Open this codepen on an Android 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.10.0

Relevant Info

Pixel 7 - Chrome Galaxy s23 - 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 team

ArcGIS Maps SDK for JavaScript

DitwanP commented 2 months ago

List of devices and browsers tested provided by Sage.

It looks like it mainly is an issue with chromium based browsers.

geospatialem commented 1 month ago

Spike to determine a fix in coordination with the third party Sortable library for next steps.

driskull commented 3 weeks ago

@DitwanP I have tested this on android using Browserstack with it seems to work fine IF not used in codepen. I think codepen is the issue. If you have a simple web page like this without the use of codepen and its iframe, it works fine.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>

<body>
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@latest/dist/calcite/calcite.esm.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@latest/dist/calcite/calcite.css" />

  <calcite-list group="layers" drag-enabled>
    <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">

    </calcite-list-item>
    <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">

    </calcite-list-item>
    <calcite-list-item label="Nested List Item" description="a calcite-list-item with a calcite-list" value="rivers">
      <calcite-list group="layers" drag-enabled>
        <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use."
          value="hiking-trails">
          <calcite-action slot="actions-end" icon="layer" text="Trails layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
          <calcite-action slot="actions-end" icon="layer" text="Waterfalls layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
          <calcite-action slot="actions-end" icon="layer" text="Rivers layer"></calcite-action>
        </calcite-list-item>
      </calcite-list>
    </calcite-list-item>
  </calcite-list>
</body>

</html>