Esri / calcite-design-system

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

External content included in dragged list item (Safari only) #9467

Open hcampos-professional opened 1 month ago

hcampos-professional commented 1 month ago

Check existing issues

Actual Behavior

https://github.com/Esri/calcite-design-system/assets/136828178/ca6fe749-610f-4886-832e-8537fcf38e7d

When dragging a list item which contains a calcite-action-menu, other content that is not inside of the list item is included in the "ghost" image, but only in Safari. It seems like Safari includes anything within the "bounds" of the dragged element and, because of the action menu being larger, extra content gets included, even if it is not in the list item.

Expected Behavior

The expected behavior is that only elements that are inside of the list item get included in the ghost image. In Chrome/Edge, the behavior is as expected.

Reproduction Sample

https://codesandbox.io/p/sandbox/calcite-nested-list-flickering-forked-zlkpv8?file=%2Findex.html%3A7%2C1

Reproduction Steps

  1. Open https://codepen.io/hccampos/pen/yLWgKJp in Safari
  2. Drag the single list item. Notice that the "OUTSIDE CONTENT" text gets included in the ghost while dragging.

Reproduction Version

2.8.4

Relevant Info

Only happens in Safari (tested with Version 17.5 (19618.2.12.11.6))

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

It impacts the LayerList widget of the ArcGIS Maps SDK, which is used in the ArcGIS SceneViewer and ArcGIS MapViewer, for example.

Calcite package

Esri team

ArcGIS Maps SDK for JavaScript

driskull commented 1 month ago

Seems to only be happening when the action-menu/group is present.

hcampos-professional commented 1 month ago

Yes, and the content is only included until the bottom of the action-menu. It really seems like Safari just takes a snapshot of the bounds of the element, without considering whether an element is even visible or part of the element being dragged.

driskull commented 1 month ago

Yeah, i'll see if there's a workaround otherwise I might have to find a safari bug to link this to or open one.