search

Esri / calcite-design-system

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

Inconsistent styling on list items after swapping with initial drop zone #10303

Open nwhittaker opened 2 months ago

nwhittaker commented 2 months ago

Check existing issues

Actual Behavior

Given a list with drag-enabled, during a drag, the item that swaps into the dragged item's initial drop zone appears to assume styling for a pseudo state (e.g. :hover, :active). Interestingly, which pseudo state is not consistent.

If dragging a middle row in one direction, the first sibling row that swaps into the initial drop zone appears to assume an :active style where the list item's handle background becomes gray.

Without stopping the drag, if the direction is reversed, the second sibling row that swaps into the initial drop zone appears to take on a :hover style where most of the list item's background becomes gray.

Drag start Drag over 1st sibling Drag over 2nd sibling
Screenshot 2024-09-13 at 10 36 41 AM Screenshot 2024-09-13 at 10 36 53 AM Screenshot 2024-09-13 at 11 15 42 AM

The initial direction of the drag doesn't matter. The first swapped sibling will always look active and the second swapped sibling will always look hovered. For longer lists, items not swapping with the dragged item's initial drop zone are not affected.

Expected Behavior

There are no styling changes to the dragged item's original siblings when they swap with its initial drop zone.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/list/#sample

Reproduction Steps

  1. Visit the list doc sample and enable drag-enabled in the sample.
  2. Drag the Waterfalls item up until its drop zone swaps with the Hiking trails item. Note the styling change on the Hiking trails handle.
  3. Without dropping, drag the Waterfalls item down until its drop zone swaps with the Rivers item. Note the styling change on the Rivers list item.

Reproduction Version

2.12.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

Esri team

ArcGIS Field Apps

geospatialem commented 1 week ago

Spike to determine if it could be related to native and/or library drag and drop functionality.