angular / angular/components

bug(cdkTargetMenuAim): directive does not really work

Open
#28,986 3 comments 2 reactions 0 assignees View on GitHub
area: cdk/menu P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

According to the docs, the `cdkTargetMenuAim` allows for a "Smart Aim" behavior which calculates the intended slope of the mouse pointer and does not switch to another submenu unless some timeout is reached or the mouse deviates from the slope. This behavior does not seem to work at all (tested on several versions: 16.1.2, 17.3.6).

### Reproduction

StackBlitz link: https://stackblitz.com/edit/qwy1he?file=src%2Fexample%2Fcdk-menu-menubar-example.html
Steps to reproduce:
1. Try moving in a diagonal line from the `edit` menu item to the `cut` menu item in the submenu.
2. Doing so will immediately open the `share` submenu instead, no matter how fast the action is done (unless its faster than the refresh rate of the monitor)

### Expected Behavior

That moving the mouse along a diagonal line only opens a different subMenu if the mouse took too long to travel.
see https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html for an example

### Actual Behavior

The different submenus disappear immediately.

From my limited debugging I was able to glean that the issue seems to stem from the PointerTracker, where the `_getItemPointerEntries()` stream doesn't seem to get output any value on entering children menu items, while the exit is called every time, meaning the `previousElement` and `activeElement` are set as undefined for the duration of the mouse interaction with the menu items and submenus.

### Environment

- Angular: 17.3.6
- CDK: 17.3.6
- Browser(s): Chrome, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the PointerTracker, especially the _getItemPointerEntries() stream and its enter/exit handling. Reproduce diagonal movement from the edit item toward cut, then verify that the intended submenu remains open until the timeout is reached or the pointer leaves the slope.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.