feat(sidenav): allow for auto focusing to be disabled (#10933)

Along the same lines as the dialog, these changes allow for the auto focusing, that is done by the sidenav, to be disabled.

Fixes #10402.

src/lib/sidenav/drawer.spec.ts

@@ -469,6 +469,19 @@ describe('MatDrawer', () => {
       expect(document.activeElement).toBe(drawerEl.nativeElement);
     }));
 
+    it('should be able to disable auto focus', fakeAsync(() => {
+      testComponent.autoFocus = false;
+      testComponent.mode = 'push';
+      fixture.detectChanges();
+      lastFocusableElement.focus();
+
+      drawer.open();
+      fixture.detectChanges();
+      tick();
+
+      expect(document.activeElement).not.toBe(firstFocusableElement);
+    }));
+
   });
 });
 
@@ -790,7 +803,7 @@ class DrawerDynamicPosition {
   // to be focusable across all platforms.
   template: `
     <mat-drawer-container>
-      <mat-drawer position="start" [mode]="mode">
+      <mat-drawer position="start" [mode]="mode" [autoFocus]="autoFocus">
         <input type="text" class="input1"/>
       </mat-drawer>
       <input type="text" class="input2"/>
@@ -798,6 +811,7 @@ class DrawerDynamicPosition {
 })
 class DrawerWithFocusableElements {
   mode: string = 'over';
+  autoFocus = true;
 }
 
 @Component({

src/lib/sidenav/drawer.ts

@@ -150,6 +150,12 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
   set disableClose(value: boolean) { this._disableClose = coerceBooleanProperty(value); }
   private _disableClose: boolean = false;
 
+  /** Whether the drawer should focus the first focusable element automatically when opened. */
+  @Input()
+  get autoFocus(): boolean { return this._autoFocus; }
+  set autoFocus(value: boolean) { this._autoFocus = coerceBooleanProperty(value); }
+  private _autoFocus: boolean = true;
+
   /** How the sidenav was opened (keypress, mouse click etc.) */
   private _openedVia: FocusOrigin | null;
 
@@ -246,6 +252,10 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
 
   /** Traps focus inside the drawer. */
   private _trapFocus() {
+    if (!this.autoFocus) {
+      return;
+    }
+
     this._focusTrap.focusInitialElementWhenReady().then(hasMovedFocus => {
       // If there were no focusable elements, focus the sidenav itself so the keyboard navigation
       // still works. We need to check that `focus` is a function due to Universal.
@@ -260,6 +270,10 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
    * opened.
    */
   private _restoreFocus() {
+    if (!this.autoFocus) {
+      return;
+    }
+
     const activeEl = this._doc && this._doc.activeElement;
 
     if (activeEl && this._elementRef.nativeElement.contains(activeEl)) {