bug(MatSidenav): Overlay scroll strategies do not work in sidenavs and drawers.

[TrevorKarjanis]

Reproduction

https://stackblitz.com/edit/angular-ivy-ng8reg?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:

1. Utilize an overlay or a component with an overlay in a mat-sidenav or mat-drawer that overflows.
2. Declare cdkScrollable on the sidenav or drawer.
3. Scroll the sidenav or drawer.

Expected Behavior

The overlay's scroll strategy is honored (e.g. the overlay remains fixed to its origin).

Actual Behavior

The sidenav's inner container, .mat-drawer-inner-container, handles the overflow and scrolls. Therefore, the cdkScrollable directive has no effect and the scroll strategy is not honored.

Environment

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

Related Issues

• autocomplete does not stick when scrolling #10079 has many comments that are likely caused by this issue. However, it is specific to autocomplete while this issue affects all overlays.
• Scrollable overlays not staying attached when inside tabs #8405 is the same issue for tabs.

Fix

CdkScrollable is declared on mat-sidenav-content but not .mat-drawer-inner-container.

Workaround

Place the following in your global styles, and declare CdkScrollable on the mat-sidenav.

.mat-drawer, .mat-sidenav {
  &[cdk-scrollable], &[cdkScrollable] {
    .mat-drawer-inner-container {
      overflow: visible;
    }
  }
}

[dragosgr]

I don't understand how this is supposed to help the autocomplete issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}