angular / angular/components

bug(TOOLTIP): Tooltip displays immediately on touch - desktop only

Abierto
#23,634 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/tooltip P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Reproduction

Steps to reproduce:
1. Visit [Tooltip docs](https://material.angular.io/components/tooltip/overview) on a touchscreen laptop with a pointer input (mouse/touchpad)
2. Touch the first example button


#### Expected Behavior

From [the tooltip spec](https://material.io/components/tooltips#behavior):

> A tooltip is displayed upon tapping **and holding** a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip **as long as the user long-presses** or hovers over the element.

#### Actual Behavior

The tip appears immediately and remains there until you touch somewhere else or move the mouse/touchpad, if you have one.

#### Notes

I think this is a classic "sticky hover" situation, which has been an issue for [a really long time](https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices). I don't have a particular solution in mind, but I don't think we can ignore this because it conflicts with autocomplete.

I'm getting an error trying to open the Autocomplete examples in Stackblitz to set up a repro, but it's probably a transient thing (passed through some kind of Cloudflare error message) so if it's working for you, just edit any of the examples and add a tooltip. When you touch the input, both the tooltip and the dropdown appear at the same time. At least the tooltip is behind the dropdown.

As an aside, I just noticed that on mobile, the autocomplete dropdown opens on long-press. I don't think Autocomplete has a spec but this seems wrong to me -- I would expect it to open on tap instead, with a tooltip displayed on long-press, and I guess a context menu otherwise?

#### Environment

- Angular: all versions I tested, back to v8
- CDK/Material: same
- Browser(s): Latest Chrome, Firefox, Edgium.
- Operating System (e.g. Windows, macOS, Ubuntu): Win10

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el ejemplo de la documentación de Tooltip y reproduce el problema en un portátil con pantalla táctil y una entrada de puntero utilizando los navegadores indicados. Compara el comportamiento táctil con la especificación de Tooltip y, después, verifica la interacción de autocomplete descrita en el informe. Se considera terminado cuando el tooltip espera una pulsación larga en dispositivos táctiles, permanece disponible mientras continúa el gesto y no entra en conflicto con el desplegable de autocomplete.

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
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.