bug(TOOLTIP): Tooltip displays immediately on touch - desktop only
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par l’exemple de la documentation de Tooltip et reproduisez le problème sur un ordinateur portable à écran tactile avec une entrée de pointeur en utilisant les navigateurs indiqués. Comparez le comportement tactile avec la spécification de Tooltip, puis vérifiez l’interaction d’autocomplete décrite dans le rapport. Le travail est terminé lorsque le tooltip attend une pression longue sur écran tactile, reste disponible pendant la poursuite du geste et n’entre pas en conflit avec la liste déroulante d’autocomplete.
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é
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100