fix(sidenav): container not picking up indirect descendant sidenavs

Fixes the sidenav container not picking up indirect descendant sidenavs.

Author: crisbeto

src/material/sidenav/BUILD.bazel

@@ -65,6 +65,7 @@ ng_test_library(
         "//src/cdk/platform",
         "//src/cdk/scrolling",
         "//src/cdk/testing",
+        "@npm//@angular/common",
         "@npm//@angular/platform-browser",
     ],
 )

src/material/sidenav/drawer.spec.ts

@@ -18,12 +18,13 @@ import {PlatformModule, Platform} from '@angular/cdk/platform';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
 import {CdkScrollable} from '@angular/cdk/scrolling';
+import {CommonModule} from '@angular/common';
 
 
 describe('MatDrawer', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatSidenavModule, A11yModule, PlatformModule, NoopAnimationsModule],
+      imports: [MatSidenavModule, A11yModule, PlatformModule, NoopAnimationsModule, CommonModule],
       declarations: [
         BasicTestApp,
         DrawerContainerNoDrawerTestApp,
@@ -33,6 +34,7 @@ describe('MatDrawer', () => {
         DrawerWithFocusableElements,
         DrawerOpenBinding,
         DrawerWithoutFocusableElements,
+        IndirectDescendantDrawer,
       ],
     });
 
@@ -323,6 +325,21 @@ describe('MatDrawer', () => {
       expect(document.activeElement)
           .toBe(closeButton, 'Expected focus not to be restored to the open button on close.');
     }));
+
+    it('should pick up drawers that are not direct descendants', fakeAsync(() => {
+      const fixture = TestBed.createComponent(IndirectDescendantDrawer);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.drawer.opened).toBe(false);
+
+      fixture.componentInstance.container.open();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.drawer.opened).toBe(true);
+    }));
+
   });
 
   describe('attributes', () => {
@@ -998,3 +1015,19 @@ class AutosizeDrawer {
 class DrawerContainerWithContent {
   @ViewChild(MatDrawerContainer, {static: false}) drawerContainer: MatDrawerContainer;
 }
+
+
+@Component({
+  // Note that we need the `ng-container` with the `ngSwitch` so that
+  // there's a directive between the container and the drawer.
+  template: `
+    <mat-drawer-container #container>
+      <ng-container [ngSwitch]="true">
+        <mat-drawer #drawer>Drawer</mat-drawer>
+      </ng-container>
+    </mat-drawer-container>`,
+})
+class IndirectDescendantDrawer {
+  @ViewChild('container', {static: false}) container: MatDrawerContainer;
+  @ViewChild('drawer', {static: false}) drawer: MatDrawer;
+}

src/material/sidenav/drawer.ts

@@ -461,7 +461,11 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
   encapsulation: ViewEncapsulation.None,
 })
 export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
-  @ContentChildren(MatDrawer) _drawers: QueryList<MatDrawer>;
+  @ContentChildren(MatDrawer, {
+    // We need to use `descendants: true`, because Ivy will no longer match
+    // indirect descendants if it's left as false.
+    descendants: true
+  }) _drawers: QueryList<MatDrawer>;
   @ContentChild(MatDrawerContent, {static: false}) _content: MatDrawerContent;
   @ViewChild(MatDrawerContent, {static: false}) _userContent: MatDrawerContent;
 

src/material/sidenav/sidenav.spec.ts

@@ -1,29 +1,26 @@
-import {Component} from '@angular/core';
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MatSidenav, MatSidenavModule} from './index';
+import {Component, ViewChild} from '@angular/core';
+import {async, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {MatSidenav, MatSidenavModule, MatSidenavContainer} from './index';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {By} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
 
 
 describe('MatSidenav', () => {
-  let fixture: ComponentFixture<SidenavWithFixedPosition>;
-  let sidenavEl: HTMLElement;
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatSidenavModule, NoopAnimationsModule],
-      declarations: [SidenavWithFixedPosition],
+      imports: [MatSidenavModule, NoopAnimationsModule, CommonModule],
+      declarations: [SidenavWithFixedPosition, IndirectDescendantSidenav],
     });
 
     TestBed.compileComponents();
-
-    fixture = TestBed.createComponent(SidenavWithFixedPosition);
-    fixture.detectChanges();
-
-    sidenavEl = fixture.debugElement.query(By.directive(MatSidenav))!.nativeElement;
   }));
 
   it('should be fixed position when in fixed mode', () => {
+    const fixture = TestBed.createComponent(SidenavWithFixedPosition);
+    fixture.detectChanges();
+    const sidenavEl = fixture.debugElement.query(By.directive(MatSidenav))!.nativeElement;
+
     expect(sidenavEl.classList).toContain('mat-sidenav-fixed');
 
     fixture.componentInstance.fixed = false;
@@ -33,6 +30,10 @@ describe('MatSidenav', () => {
   });
 
   it('should set fixed bottom and top when in fixed mode', () => {
+    const fixture = TestBed.createComponent(SidenavWithFixedPosition);
+    fixture.detectChanges();
+    const sidenavEl = fixture.debugElement.query(By.directive(MatSidenav))!.nativeElement;
+
     expect(sidenavEl.style.top).toBe('20px');
     expect(sidenavEl.style.bottom).toBe('30px');
 
@@ -42,6 +43,21 @@ describe('MatSidenav', () => {
     expect(sidenavEl.style.top).toBeFalsy();
     expect(sidenavEl.style.bottom).toBeFalsy();
   });
+
+  it('should pick up sidenavs that are not direct descendants', fakeAsync(() => {
+    const fixture = TestBed.createComponent(IndirectDescendantSidenav);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.sidenav.opened).toBe(false);
+
+    fixture.componentInstance.container.open();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.sidenav.opened).toBe(true);
+  }));
+
 });
 
 
@@ -65,3 +81,20 @@ class SidenavWithFixedPosition {
   fixedTop = 20;
   fixedBottom = 30;
 }
+
+
+@Component({
+  // Note that we need the `ng-container` with the `ngSwitch` so that
+  // there's a directive between the container and the sidenav.
+  template: `
+    <mat-sidenav-container #container>
+      <ng-container [ngSwitch]="true">
+        <mat-sidenav #sidenav>Sidenav.</mat-sidenav>
+      </ng-container>
+      <mat-sidenav-content>Some content.</mat-sidenav-content>
+    </mat-sidenav-container>`,
+})
+class IndirectDescendantSidenav {
+  @ViewChild('container', {static: false}) container: MatSidenavContainer;
+  @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
+}

src/material/sidenav/sidenav.ts

@@ -114,6 +114,10 @@ export class MatSidenav extends MatDrawer {
   encapsulation: ViewEncapsulation.None,
 })
 export class MatSidenavContainer extends MatDrawerContainer {
-  @ContentChildren(MatSidenav) _drawers: QueryList<MatSidenav>;
+  @ContentChildren(MatSidenav, {
+    // We need to use `descendants: true`, because Ivy will no longer match
+    // indirect descendants if it's left as false.
+    descendants: true
+  }) _drawers: QueryList<MatSidenav>;
   @ContentChild(MatSidenavContent, {static: false}) _content: MatSidenavContent;
 }