Skip to content

Commit 2fa78c6

Browse files
authored
fix(material/sidenav): mark sidenav content as scrollable (#19848)
Marks the sidenav's inner scrollable element as `cdkScrollable` so any overlays placed inside of it can update. Fixes #19846. Fixes #18453.
1 parent 1b639f5 commit 2fa78c6

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

src/material/sidenav/drawer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="mat-drawer-inner-container">
1+
<div class="mat-drawer-inner-container" cdkScrollable>
22
<ng-content></ng-content>
33
</div>

src/material/sidenav/drawer.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -642,6 +642,17 @@ describe('MatDrawer', () => {
642642
}));
643643

644644
});
645+
646+
it('should mark the drawer content as scrollable', () => {
647+
const fixture = TestBed.createComponent(BasicTestApp);
648+
fixture.detectChanges();
649+
650+
const content = fixture.debugElement.query(By.css('.mat-drawer-inner-container'));
651+
const scrollable = content.injector.get(CdkScrollable);
652+
expect(scrollable).toBeTruthy();
653+
expect(scrollable.getElementRef().nativeElement).toBe(content.nativeElement);
654+
});
655+
645656
});
646657

647658
describe('MatDrawerContainer', () => {

0 commit comments

Comments
 (0)