diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index b063cc0ad98..a699caaa26e 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -274,6 +274,18 @@ describe('MatBottomSheet', () => { expect(overlayContainerElement.childElementCount).toBe(0); })); + it('should dismiss the bottom sheet when the service is destroyed', fakeAsync(() => { + bottomSheet.open(PizzaMsg); + viewContainerFixture.detectChanges(); + expect(overlayContainerElement.childElementCount).toBeGreaterThan(0); + + bottomSheet.ngOnDestroy(); + viewContainerFixture.detectChanges(); + flush(); + + expect(overlayContainerElement.childElementCount).toBe(0); + })); + it('should open a new bottom sheet after dismissing a previous sheet', fakeAsync(() => { let config: MatBottomSheetConfig = {viewContainerRef: testViewContainerRef}; let bottomSheetRef: MatBottomSheetRef = bottomSheet.open(PizzaMsg, config); @@ -614,6 +626,23 @@ describe('MatBottomSheet with parent MatBottomSheet', () => { expect(overlayContainerElement.textContent) .toContain('Taco', 'Expected child bottom sheet to be dismissed by opening from parent'); })); + + it('should not close parent bottom sheet when child is destroyed', fakeAsync(() => { + parentBottomSheet.open(PizzaMsg); + fixture.detectChanges(); + tick(1000); + + expect(overlayContainerElement.textContent) + .toContain('Pizza', 'Expected a bottom sheet to be opened'); + + childBottomSheet.ngOnDestroy(); + fixture.detectChanges(); + tick(1000); + + expect(overlayContainerElement.textContent) + .toContain('Pizza', 'Expected a bottom sheet to stay open'); + })); + }); describe('MatBottomSheet with default options', () => { diff --git a/src/lib/bottom-sheet/bottom-sheet.ts b/src/lib/bottom-sheet/bottom-sheet.ts index 6a169a6e92b..d43192e0f4c 100644 --- a/src/lib/bottom-sheet/bottom-sheet.ts +++ b/src/lib/bottom-sheet/bottom-sheet.ts @@ -18,6 +18,7 @@ import { TemplateRef, InjectionToken, Inject, + OnDestroy, } from '@angular/core'; import {Location} from '@angular/common'; import {of as observableOf} from 'rxjs'; @@ -35,7 +36,7 @@ export const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = * Service to trigger Material Design bottom sheets. */ @Injectable({providedIn: MatBottomSheetModule}) -export class MatBottomSheet { +export class MatBottomSheet implements OnDestroy { private _bottomSheetRefAtThisLevel: MatBottomSheetRef | null = null; /** Reference to the currently opened bottom sheet. */ @@ -118,6 +119,12 @@ export class MatBottomSheet { } } + ngOnDestroy() { + if (this._bottomSheetRefAtThisLevel) { + this._bottomSheetRefAtThisLevel.dismiss(); + } + } + /** * Attaches the bottom sheet container component to the overlay. */