bug(material/tooltip): tooltip inside sidenav hides after text update
- 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?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When the tooltip component overflows a parent sidenav and its text content is updated dynamically, it hides.
We have debugged the code, and this happens because the sidenav component extends the cdk-scrollable.
The piece of code that calls the tooltip hide function is the following:
https://github.com/angular/components/blob/bae953999407fd385b1d571e04350bf0f28abf05/src/material/tooltip/tooltip.ts#L510-L520
### Reproduction
Stackblitz url:
https://stackblitz.com/edit/stackblitz-starters-wbd1hh?file=src%2Ftooltip-sidenav%2Ftooltip-sidenav.component.html
As you can see on the stackBlitz example, we have two tooltips:
- The tooltip inside the sidenav, which overflows the sidenav component. That if we update the tooltip text, the tooltip disappears. (BUG)
- On the other hand, we have the tooltip inside the mat-sidenav-content which works properly, and it doesn't hide after updating it. (WORKS WELL because doesn't overflow the parent)
### Expected Behavior
The tooltip inside the sidenav should not hide when the text is updated.
### Actual Behavior
The tooltip placed inside the sidnav that overflows is hidden suddenly when the text is updated.
### Environment
- Angular: v16.2.4
- CDK/Material: v16.2.3
- Browser(s): Google chrome Versión 116.0.5845.187, Firefox 117.0
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Guía de contribución
Línea de trabajo
Start with src/material/tooltip/tooltip.ts around lines 510-520 and reproduce the issue using the linked StackBlitz example. Compare the overflowing tooltip inside mat-sidenav with the working tooltip inside mat-sidenav-content, then run the relevant tooltip and sidenav tests if available. Done means updating the overflowing tooltip text no longer hides the tooltip.
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
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 35/100