angular / angular/components

bug(cdkTargetMenuAim): directive does not really work

Aperta
#28,986 3 commenti 2 reazioni 0 assegnatari Vedi su GitHub
area: cdk/menu P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione collegata su StackBlitz e analizza PointerTracker, in particolare lo stream di _getItemPointerEntries() e la relativa gestione di enter/exit. Riproduci il movimento diagonale dall’elemento edit verso cut, quindi verifica che il sottomenu previsto rimanga aperto fino al raggiungimento del timeout o finché il puntatore non esce dalla pendenza.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.