angular / angular/components

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

Open
#26,440 4 comments 1 reaction 0 assignees View on GitHub
area: cdk/drag-drop P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

```


```

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

![Chrome](https://user-images.githubusercontent.com/122812012/212735599-6cd192e4-c6a1-4750-b038-36f1e03524a8.gif)

### Firefox: same logic fails

![FireFox](https://user-images.githubusercontent.com/122812012/212735793-b76e86e6-191f-4727-9394-ab3ac554394e.gif)

### Reproduction

Steps to reproduce:
1. Create `` structure inside Angular app
2. Add `(mouseenter)` to ``
3. Inside `` add `

` 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the cdk-tree example with cdk-nested-tree-node, cdkDrag, and the mouseenter/mouseleave and drag lifecycle events in Firefox and Chrome. Compare whether mouseenter fires after cdkDragStarted; done means the same event behavior is observed in both browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.