bug(TOOLTIP): Tooltip displays immediately on touch - desktop only
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
#### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với ví dụ trong tài liệu Tooltip và tái hiện vấn đề trên một laptop màn hình cảm ứng có đầu vào con trỏ bằng các trình duyệt được liệt kê. So sánh hành vi cảm ứng với đặc tả Tooltip, sau đó xác minh tương tác autocomplete được mô tả trong báo cáo. Công việc được xem là hoàn tất khi tooltip chờ thao tác nhấn giữ trên cảm ứng, vẫn khả dụng trong khi cử chỉ tiếp tục và không xung đột với dropdown autocomplete.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100