fix(bottom-sheet): server-side rendering error when opened (#10487)

* Fixes a server-side rendering error when opening a bottom sheet.
* Adds the bottom sheet to the prerender CI check.
This commit is contained in:
Kristiyan Kostadinov
2018-04-19 11:45:00 -06:00
committed by mmalerba
parent 7747e66ed4
commit 6d9ed8a326
2 changed files with 15 additions and 6 deletions
@@ -207,6 +207,10 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
/** Saves a reference to the element that was focused before the bottom sheet was opened. */
private _savePreviouslyFocusedElement() {
this._elementFocusedBeforeOpened = this._document.activeElement as HTMLElement;
Promise.resolve().then(() => this._elementRef.nativeElement.focus());
// The `focus` method isn't available during server-side rendering.
if (this._elementRef.nativeElement.focus) {
Promise.resolve().then(() => this._elementRef.nativeElement.focus());
}
}
}
+10 -5
View File
@@ -7,6 +7,7 @@ import {Component, ElementRef, NgModule} from '@angular/core';
import {
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
@@ -41,6 +42,7 @@ import {
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatBottomSheet,
} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {ServerModule} from '@angular/platform-server';
@@ -59,7 +61,7 @@ export class TableDataSource extends DataSource<any> {
@Component({
template: `<button>Do the thing</button>`
})
export class TestDialog {}
export class TestEntryComponent {}
@Component({
@@ -80,10 +82,12 @@ export class KitchenSink {
dialog: MatDialog,
viewportRuler: ViewportRuler,
focusMonitor: FocusMonitor,
elementRef: ElementRef<HTMLElement>) {
elementRef: ElementRef<HTMLElement>,
bottomSheet: MatBottomSheet) {
focusMonitor.focusVia(elementRef.nativeElement, 'program');
snackBar.open('Hello there');
dialog.open(TestDialog);
dialog.open(TestEntryComponent);
bottomSheet.open(TestEntryComponent);
// Do a sanity check on the viewport ruler.
viewportRuler.getViewportRect();
@@ -98,6 +102,7 @@ export class KitchenSink {
BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
@@ -135,8 +140,8 @@ export class KitchenSink {
CdkTableModule
],
bootstrap: [KitchenSink],
declarations: [KitchenSink, TestDialog],
entryComponents: [TestDialog],
declarations: [KitchenSink, TestEntryComponent],
entryComponents: [TestEntryComponent],
})
export class KitchenSinkClientModule { }