diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts index 87b39f3cffdf..78df74ebcaa7 100644 --- a/src/cdk/a11y/focus-monitor/focus-monitor.ts +++ b/src/cdk/a11y/focus-monitor/focus-monitor.ts @@ -140,7 +140,11 @@ export class FocusMonitor implements OnDestroy { */ focusVia(element: HTMLElement, origin: FocusOrigin): void { this._setOriginForCurrentEventQueue(origin); - element.focus(); + + // `focus` isn't available on the server + if (typeof element.focus === 'function') { + element.focus(); + } } ngOnDestroy() { diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 7439e327e952..f6abef8e2f46 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -3,7 +3,7 @@ import { CdkTableModule, DataSource } from '@angular/cdk/table'; -import {Component, NgModule} from '@angular/core'; +import {Component, ElementRef, NgModule} from '@angular/core'; import { MatAutocompleteModule, MatBadgeModule, @@ -44,6 +44,7 @@ import { } from '@angular/material'; import {BrowserModule} from '@angular/platform-browser'; import {ServerModule} from '@angular/platform-server'; +import {FocusMonitor} from '@angular/cdk/a11y'; import {Observable, of as observableOf} from 'rxjs'; export class TableDataSource extends DataSource { @@ -77,7 +78,10 @@ export class KitchenSink { constructor( snackBar: MatSnackBar, dialog: MatDialog, - viewportRuler: ViewportRuler) { + viewportRuler: ViewportRuler, + focusMonitor: FocusMonitor, + elementRef: ElementRef) { + focusMonitor.focusVia(elementRef.nativeElement, 'program'); snackBar.open('Hello there'); dialog.open(TestDialog);