angular / angular/components

bug(cdkTargetMenuAim): directive does not really work

Ouverte
#28,986 3 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/menu P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et inspectez PointerTracker, en particulier le flux de _getItemPointerEntries() et sa gestion de enter/exit. Reproduisez un déplacement diagonal depuis l’élément edit vers cut, puis vérifiez que le sous-menu prévu reste ouvert jusqu’à ce que le timeout soit atteint ou que le pointeur quitte la pente.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.