[Tree, TreeItemCustom]: Drag and Drop does not work in some cases

[vonBrax]

Bug Description

When using the Tree element with TreeItemCustom elements, in some situations the drag and drop functionality doesn't work:

1. TreeItemCustom content takes up the full width of the tree item:

Tested both in Chrome and Firefox and the bug only happens in Chrome, but I'm not sure which browser is actually following the specs here.

The problem seems to be that in Chrome, the content element is interpreted as being a sibling from shadow root of the TreeItemCustom element, instead of being a child of the

element, and therefore "blocking" interactions with the

element.

The drag and drop can still work if you drag tree item on its very start or end, but anywhere in the middle of it won't work.

2. Tree element is used inside another CustomElement:

In this case, the problem seems to be related to how the dragged source element is found:

ui5-webcomponents/packages/base/src/util/dragAndDrop/DragRegistry.ts

Line 15 in 9f27a51

draggedElement = e.target;

Using event.target here will return the outer CustomElement element and not the actual dragged element in its shadow dom.

Affected Component

Tree, TreeItemCustom

Expected Behaviour

Drag and drop should work also for Trees with TreeItemCustom

Isolated Example

https://stackblitz.com/edit/vitejs-vite-pnft8v5r?file=src%2Fmain.ts

Steps to Reproduce

1. Either create a Tree with TreeItemCustom, while giving them full-width or
2. Use the Tree inside another Webcomponent
3. Try to drag and drop

(Both cases are present in the linked repro)

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.8.0

Browser

Chrome, Firefox

Operating System

Windows

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[hinzzx]

Hi colleagues @SAP/ui5-webcomponents-topic-p ,

There is a problem with the Drag and Drop functionality when a ui5-tree is used with ui5-tree-item-custom elements.

In the provided sample the reporter presented the problem very well and with proposed solutions.

Could you please, take a look ?

Best Regards,
Stoyan