bug(TOOLTIP): Tooltip displays immediately on touch - desktop only
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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
Beitragsleitfaden
Rechercherichtung
Beginne mit dem Tooltip-Dokumentationsbeispiel und reproduziere das Problem auf einem Touchscreen-Laptop mit einer Zeigereingabe unter Verwendung der aufgeführten Browser. Vergleiche das Touch-Verhalten mit der Tooltip-Spezifikation und überprüfe anschließend die im Bericht beschriebene autocomplete-Interaktion. Als erledigt gilt die Aufgabe, wenn der Tooltip bei Touch auf einen langen Druck wartet, während der Geste verfügbar bleibt und nicht mit dem autocomplete-Dropdown in Konflikt gerät.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100