angular / angular/components

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

オープン
#23,634 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/tooltip P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Tooltip のドキュメント例から始め、記載されているブラウザを使って、ポインター入力のあるタッチスクリーンラップトップで問題を再現します。タッチ動作を Tooltip の仕様と比較し、その後、レポートに記載されている autocomplete の操作を確認します。タッチ時に Tooltip が長押しを待ち、ジェスチャーが続いている間も利用可能な状態を維持し、autocomplete のドロップダウンと競合しなければ完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。