Skip to content

Commit 6d9ed8a

Browse files
crisbetommalerba
authored andcommitted
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.
1 parent 7747e66 commit 6d9ed8a

File tree

2 files changed

+15
-6
lines changed

2 files changed

+15
-6
lines changed

src/lib/bottom-sheet/bottom-sheet-container.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,10 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
207207
/** Saves a reference to the element that was focused before the bottom sheet was opened. */
208208
private _savePreviouslyFocusedElement() {
209209
this._elementFocusedBeforeOpened = this._document.activeElement as HTMLElement;
210-
Promise.resolve().then(() => this._elementRef.nativeElement.focus());
210+
211+
// The `focus` method isn't available during server-side rendering.
212+
if (this._elementRef.nativeElement.focus) {
213+
Promise.resolve().then(() => this._elementRef.nativeElement.focus());
214+
}
211215
}
212216
}

src/universal-app/kitchen-sink/kitchen-sink.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {Component, ElementRef, NgModule} from '@angular/core';
77
import {
88
MatAutocompleteModule,
99
MatBadgeModule,
10+
MatBottomSheetModule,
1011
MatButtonModule,
1112
MatButtonToggleModule,
1213
MatCardModule,
@@ -41,6 +42,7 @@ import {
4142
MatTabsModule,
4243
MatToolbarModule,
4344
MatTooltipModule,
45+
MatBottomSheet,
4446
} from '@angular/material';
4547
import {BrowserModule} from '@angular/platform-browser';
4648
import {ServerModule} from '@angular/platform-server';
@@ -59,7 +61,7 @@ export class TableDataSource extends DataSource<any> {
5961
@Component({
6062
template: `<button>Do the thing</button>`
6163
})
62-
export class TestDialog {}
64+
export class TestEntryComponent {}
6365

6466

6567
@Component({
@@ -80,10 +82,12 @@ export class KitchenSink {
8082
dialog: MatDialog,
8183
viewportRuler: ViewportRuler,
8284
focusMonitor: FocusMonitor,
83-
elementRef: ElementRef<HTMLElement>) {
85+
elementRef: ElementRef<HTMLElement>,
86+
bottomSheet: MatBottomSheet) {
8487
focusMonitor.focusVia(elementRef.nativeElement, 'program');
8588
snackBar.open('Hello there');
86-
dialog.open(TestDialog);
89+
dialog.open(TestEntryComponent);
90+
bottomSheet.open(TestEntryComponent);
8791

8892
// Do a sanity check on the viewport ruler.
8993
viewportRuler.getViewportRect();
@@ -98,6 +102,7 @@ export class KitchenSink {
98102
BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
99103
MatAutocompleteModule,
100104
MatBadgeModule,
105+
MatBottomSheetModule,
101106
MatButtonModule,
102107
MatButtonToggleModule,
103108
MatCardModule,
@@ -135,8 +140,8 @@ export class KitchenSink {
135140
CdkTableModule
136141
],
137142
bootstrap: [KitchenSink],
138-
declarations: [KitchenSink, TestDialog],
139-
entryComponents: [TestDialog],
143+
declarations: [KitchenSink, TestEntryComponent],
144+
entryComponents: [TestEntryComponent],
140145
})
141146
export class KitchenSinkClientModule { }
142147

0 commit comments

Comments
 (0)