bug(cdk-drag-drop, cdk-tree): FireFox (mouseenter) not working with cdkDrag

[maximumCallStackSizeExceeded]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Different behavior with cdkDrag and (mouseenter) between Chrome and Firefox

        <cdk-nested-tree-node *cdkTreeNodeDef="let node" 
                              (mouseenter)="onMouseEnter(node)" (mouseleave)="onMouseLeave(node)">
            <div
                    cdkDrag
                    (cdkDragStarted)="dragStarted()" (cdkDragEnded)="dragEnded()"
                    (cdkDragDropped)="dragDropped()"
                    (click)="selectEntity(node)"
            >

Chrome: (mouseenter) event is triggered successfully, after (cdkDragStarted)

Firefox: same logic fails

Reproduction

Steps to reproduce:

1. Create <cdk-tree> structure inside Angular app
2. Add (mouseenter) to <cdk-nested-tree-node>
3. Inside <cdk-nested-tree-node> add <div> with cdkDrag directive
4. Compare behavior between Chrome and FireFox

Expected Behavior

Should be same

Actual Behavior

Firefox: Failed (mouseenter) event execution

Event not triggering after (cdkDragStarted)

Environment

• Angular: 10.2.7
• CDK/Material: 10.2.7
• Browser(s): Chrome 108.0.5359.124, FireFox 108.0.1
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, Fedora

[mykola-pyvovar]

I'm having the same problem with Angular/CDK v12

[armannarimanyan]

I'm having the same problem with Angular/CDK v 15.
Maybe you already know how to fix these errors ?

[mykola-pyvovar]

I've solved it with the brute-force solution when on cdkDragMoved I'm calculating the position and manually adding hover class to the elements. After that, I'm querying elements on cdkDragDropped by this class and performing the required logic

[rilindbicaj]

Hey hey, jumping in on this! I've bumped into a similar issue, with mouseenter and mouseleave not activating while dragging an item over the destined element.

For Firefox, what fixed the issue for me was adding draggable='true' to the cdkDrag item 👍 I don't understand why though.