bug(MatSidenav): Overlay scroll strategies do not work in sidenavs and drawers. #19846
Description
Reproduction
https://stackblitz.com/edit/angular-ivy-ng8reg?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce:
- Utilize an overlay or a component with an overlay in a mat-sidenav or mat-drawer that overflows.
- Declare cdkScrollable on the sidenav or drawer.
- 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;
}
}
}