angular / angular/components

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

Đang mở
#23,634 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/tooltip P3
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.