angular / angular/components

bug(MatList): content projected mat-list-items do not apply mat-mdc-list-item-interactive

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

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.2.6

### Description

After updating to Angular v15 projecting `mat-list-items` into the `mat-nav-list` does no longer work as expected. The hover effect is not working as the class `mat-mdc-list-item-interactive` is not added.

```

google
angular

```

### Reproduction

StackBlitz link: https://stackblitz.com/edit/ng5v1w-bbsdvs?file=src%2Fexample%2Flist-overview-example.html
Steps to reproduce:
1. hover over not working items

### Expected Behavior

Content projected items should behave like they were added "directly".

### Actual Behavior

`Mat-list-items` do not get the `mat-mdc-list-item-interactive` class and therefore displayed as non-interactive.

### Environment

- Angular: 15.2.9
- CDK/Material: 15.2.9
- Browser(s): Firefox/Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/example/list-overview-example.html, and compare projected mat-list-items with items declared directly in mat-nav-list. Reproduce the missing hover behavior and trace the list-item projection path; done means projected items receive mat-mdc-list-item-interactive and behave like directly added items.

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.