angular / angular/components

Misleading click feedback in complex md-nav-list

Open
#5,132 4 comments 9 reactions 0 assignees View on GitHub
area: material/list P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.