angular / angular/components

bug(cdkTargetMenuAim): directive does not really work

Abierto
#28,986 3 comentarios 2 reacciones 0 asignados Ver en GitHub
area: cdk/menu P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comience con la reproducción enlazada de StackBlitz e inspeccione PointerTracker, especialmente el flujo de _getItemPointerEntries() y su gestión de enter/exit. Reproduzca el movimiento diagonal desde el elemento edit hacia cut y, a continuación, compruebe que el submenú previsto permanezca abierto hasta que se alcance el timeout o el puntero salga de la pendiente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.