angular / angular/components

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

Aperta
#23,634 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/tooltip P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### 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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l’esempio della documentazione di Tooltip e riproduci il problema su un laptop con touchscreen e un input da puntatore utilizzando i browser elencati. Confronta il comportamento touch con la specifica di Tooltip, quindi verifica l’interazione di autocomplete descritta nel report. Il lavoro è completato quando il tooltip attende una pressione prolungata sul touch, rimane disponibile mentre il gesto continua e non entra in conflitto con il dropdown di autocomplete.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.