bug(sidenav): scroll strategy not taken, when inside mat-sidenav-content

[Ju-lia]

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

mat-select inside mat-sidenav-content always has BlockScrollStrategy, no matter which strategy is injected with token MAT_SELECT_SCROLL_STRATEGY

Reproduction

Add a mat-select in mat-sidenav-content and change scroll strategy for example to reposition -> scroll keeps beeing blocked

I added an example here: https://stackblitz.com/edit/angular-ghcbzc?file=src/material.module.ts

I added the autocomplete component, to test the strategy. For autocomplete it seems to work fine.

Expected Behavior

Scroll strategy should be honored

Actual Behavior

Scroll strategy is always block

Environment

• Angular: 13
• CDK/Material: 13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[volvachev]

Hi, after investigation I've found that mat-select uses hasBackdrop under the hood, which doesn't allow to scroll even with enabled reposition strategy. And it isn't used in autocomplete, backdrop click is handled by focus.

As I understand if mat-select was implemented over focus, it wouldn't be affected by hasBackdrop. There is some another solution which allows to scroll and to use backdrop, but I haven't found such approach in cdk yet. @crisbeto

[KostyaTretyak]

Also sidenav not working in Google Chrome with anchorScrolling: 'enabled', see stackblitz

[PabloPerezAguilo]

If you remove the sidenav the behaviour is the same (autocomplete works, select doesn't). Could the problem be related to the scrolling component not having a scrolling predecessor?

I tried cdk-scrollable in the component but didnt work

https://stackblitz.com/edit/angular-ghcbzc-frs81n?file=src%2Fapp%2Fsidenav-overview-example.html

[NatalieLukaniuk]

The same defect is present for the datepicker component. MAT_DATEPICKER_SCROLL_STRATEGY doesn't affect background scroll if the datepicker is inside mat-sidenav-content.