Misleading click feedback in complex md-nav-list
- 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

Contributor 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