angular / angular/components

bug(cdkTargetMenuAim): directive does not really work

Offen
#28,986 3 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/menu P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der verlinkten StackBlitz-Reproduktion und untersuchen Sie den PointerTracker, insbesondere den Stream von _getItemPointerEntries() und dessen enter/exit-Behandlung. Reproduzieren Sie eine diagonale Bewegung vom edit-Eintrag in Richtung cut und überprüfen Sie anschließend, dass das vorgesehene Untermenü geöffnet bleibt, bis das Timeout erreicht ist oder der Pointer den Bereich der Steigung verlässt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.