angular / angular/components

Misleading click feedback in complex md-nav-list

Đang mở
#5,132 4 bình luận 9 reaction 0 người được giao Xem trên GitHub
area: material/list P4
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ả

#### Bug, feature request, or proposal:

UX related bug

#### What is the expected behavior?

When the user clicks a link in a `md-list-item` inside a complex `md-nav-list`, the link should be activated

#### What is the current behavior?

When the user clicks the link **close to the edge**, she obtains the feedback (the ripple effect is fired) but the link does not get the click event

#### What are the steps to reproduce?

Use the template provided at https://material.angular.io/components/component/list#navigation-lists (_For more complex navigation lists..._) or visit http://plnkr.co/edit/oqGfqlDTYRLF4bOSHQGv?p=preview

Click at the edges of the elements of the list.

#### What is the use-case or motivation for changing an existing behavior?

An UX issue; users get the feedback when they click but the app does not fire the action

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested with Chromium 58.0.3029.81 and Firefox 45.9.0

#### Is there anything else we should know?

The following gif shows how the `mat-list-text` element (container of the `` element ) is smaller than the `mat-list-item` element. Therefore, it doesn't get the click event

![element-sizes](https://user-images.githubusercontent.com/26228/27145488-4be1dfdc-5136-11e7-89b2-44eb2384f725.gif)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with the complex navigation-list example in the Material list documentation or reproduce the behavior using the linked Plunker. Inspect the relationship between the md-list-item, mat-list-text container, and link at the list edges; done means clicking anywhere on the item activates the link consistently with the ripple feedback.

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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.