External content included in dragged list item (Safari only)

[hcampos-professional]

Check existing issues

• [x] I have checked for existing issues to avoid duplicates

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

• [X] @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