angular / angular/components

bug(overlay): Weird tooltip issue with the new popover overlay.

Abierto
#32,747 4 comentarios 0 reacciones 0 asignados Ver en GitHub
area: cdk/overlay area: material/select area: material/tooltip P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

v20

### Description

We detected a weird issue with tooltips regarding the popover introduced in v21.
When I put a tooltip on a mat-select, hover over the mat-select, the tooltip is shown. Then I open the mat select and move out my mouse from the browser and bring the mouse back to the browser, the tooltip is shown no matter where i am hovering on with my mouse.
Usually, it is solved after the mat select is closed and opened, then i cannot repro anymore.
But reloading the page and doing it the first time is usually a good repro for the issue.

I'm not sure if I could explain the repro correctly, so here is a short gif:
![Image](https://github.com/user-attachments/assets/5131e9f5-1102-4998-a32f-9586d0027b25)

I scrolled through issues that can be related to my issue, and found this one: https://github.com/angular/components/issues/32642
Turning off the new popover with
`{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } },` solves the issue.
I cannot reproduce it anymore with usePopover: false.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-3qpcms44?file=package.json,src%2Fmain.ts
Steps to reproduce:
1. Open the page the first time
2. Hover over the mat select
3. Open the mat select
4. Move the mouse outside of the browser
5. Bring back the mouse
6. The tooltip will be shown no matter where i hover over on the page

### Expected Behavior

The tooltip should not be shown everywhere.

### Actual Behavior

The tooltip is shown everywhere.

### Environment

- Angular: v21.1.2
- CDK/Material: v21.1.2
- Browser(s): Chrome latest
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz, especialmente con package.json y src/main.ts, y sigue los pasos de tooltip/mat-select con usePopover habilitado. Confirma el comportamiento en la primera carga en Chrome; se considera terminado cuando el tooltip ya no se muestra en toda la página después de salir del navegador y volver a entrar, mientras que el tooltip normal sigue apareciendo en el mat-select.

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
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
58/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.