angular / angular/components

sidenav: scroll strategies not working when mat-sidenav-container is used

Open
#14,996 2 comments 5 reactions 0 assignees View on GitHub
area: material/sidenav needs investigation P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?

When dialog is opened inside mat-sidenav-container scroll strategies should work as usual. Block should block scrolling when dialog is opened, noop should allow scrolling, etc.

#### What is the current behavior?

Scroll strategies don't work when mat-sidenav-container is used. If I open dialog with backdrop and noop scroll strategy, scrolling is still blocked. If I remove backdrop and use block strategy, scrolling is still possible.

#### What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-effkee

Open dialog and try to scroll. Play around with backdrop and scroll settings.

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

Angular, Material and CDK 7.2.2, macos, Chrome (haven't tried other browsers but I assume it's the same)

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

/

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect how dialogs opened inside mat-sidenav-container apply block and noop scroll strategies, with and without a backdrop. Confirm the fix by reproducing the reported combinations and verifying that block prevents scrolling while noop permits it.

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
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.