bug(TOOLTIP): Tooltip displays immediately on touch - desktop only
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 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