mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
mmalerba
parent
7747e66ed4
commit
6d9ed8a326
@@ -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());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 { }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user