angular/components

Angular Material Tree issue with mouse event (mouseenter) when hovering from a child node to its parent node in within a branch

Closed this issue · 1 comments

emyoda commented

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

Due to the deprecation and accessibility issues of FlatTreeControl, MatTreeFlattener, and MatTreeFlatDataSource, I switched to the new API using levelAccessor. However while I was able to successfully migrate to levelAccessor, I run into an issue when using (mouseenter) at mat-tree-node, and at mat-nested-tree-node.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-vkc5ug?file=src%2Fexamples%2Fmateriral-level-accessor-tree.compononet.ts
Steps to reproduce:

  1. Go to Vegetables, Green, Broccoli
  2. Check the console.log while hovering from Broccoli, Green, Vegetables
  3. The console.log inside onMouseEnter is not printed
  4. When you hover from Vegetables, Green, Broccoli the console.log onMouseEnter is printed

Expected Behavior

The expected behaviour is that when the user hovers from a child node to parent node, then this event should be able to trigger on the parent node. Note that the other way around works perfectly fine (When user hovers from parent node to child node)

Actual Behavior

mouseenter event is not triggered when hovering from child node to parent node. Note that pointerenter is also not triggered in such scenario

Environment

  • Angular:
  • CDK/Material: 18.2.1
  • Browser(s): Safari/Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
wagnermaciel commented

This is working as intended. The reason why "onMouseEnter" is not getting fired when going up the tree is because the child nodes are nested inside of the parent nodes. This means when your cursor is on "Broccoli", your mouse is currently inside "Green" and "Vegetables".