Bug Description

While using the Tree component, I found that the source.element of the move-over event was never the element that had started the drag, instead it was an element way further up the DOM tree.

After some debugging, I found that the element that was present used the ui5-tree inside it's ShadowDOM, and it seems like the DragRegistry system can't handle this particular setup.

My assumption is that the event retargeting when it leaves the higher component ShadowDOM rewrites the target overriding the actual source element. This essentially means that any use of ui5-tree drag/drop requires a direct Light DOM path to the body element, which might be unexpected.

I can work around this by not using the ShadowDOM for the parent elements, but the documentation doesn't mention this and took a few hours to work out what was going on.

Also as a side note, the docs for ui5-tree seem to be missing the move/move-over events, instead I just copied the info from ui5-list and guessed the name of the event types correctly.

Affected Component

List

Expected Behaviour

I would expect that the drag/drop functionality of ui5-tree can be used within a ShadowDOM

Isolated Example

StackBlitz

Steps to Reproduce

1. Attempt to Drag/Drop the top list marked "ShadowDOM"
2. Note in the console the tag names of the source and destination, with an incorrect source
3. Attempt to Drag/Drop the bottm list marked "LightDOM"
4. Note in the console the tag names of the source and destination, with an correct source

The only difference between the two components is that the LightDomComponent overrides the Lit createRenderRoot function to bypass the ShadowDOM, where the other does not.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.8.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

No response

Declaration

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