fix(toastr): recreate container if it's not attached to dom (#1224)

Closes #1099
akveo · Feb 11, 2019 · 3343136 · 3343136
1 parent d89505a
commit 3343136
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/src/framework/theme/components/toastr/toastr.service.spec.ts b/src/framework/theme/components/toastr/toastr.service.spec.ts
@@ -127,23 +127,26 @@ describe('toastr-container-registry', () => {
   let positionBuilder: any;
   let positionHelper: any;
   let containerStub: any;
+  let documentStub: any;
 
   beforeEach(() => {
     containerStub = {
+
       attach() {
+        return {
+          location: {
+            nativeElement: 'element',
+          },
+        }
       },
-    }
-  });
+    };
 
-  beforeEach(() => {
     overlayStub = {
       create() {
         return containerStub;
       },
     };
-  });
 
-  beforeEach(() => {
     positionBuilder = {
       global() {
         return {
@@ -152,21 +155,34 @@ describe('toastr-container-registry', () => {
         }
       },
     };
-  });
 
-  beforeEach(() => {
     positionHelper = {
       toLogicalPosition(position) {
         return position;
       },
     };
+
+    documentStub = {
+      _contains: true,
+
+      contains: () => {
+        return documentStub._contains;
+      },
+    }
   });
 
   beforeEach(() => {
     const cfr = TestBed.configureTestingModule({
       imports: [NbToastrModule.forRoot()],
     }).get(ComponentFactoryResolver);
-    toastrContainerRegistry = new NbToastrContainerRegistry(overlayStub, positionBuilder, positionHelper, cfr);
+
+    toastrContainerRegistry = new NbToastrContainerRegistry(
+      overlayStub,
+      positionBuilder,
+      positionHelper,
+      cfr,
+      documentStub,
+    );
   });
 
   it('should create new container if not exists for requested position', () => {
@@ -186,6 +202,17 @@ describe('toastr-container-registry', () => {
     expect(overlayCreateSpy).toHaveBeenCalledTimes(1);
   });
 
+
+  it('should re-create when unattached from document', () => {
+    const overlayCreateSpy = spyOn(overlayStub, 'create').and.returnValue(containerStub);
+
+    toastrContainerRegistry.get(NbGlobalLogicalPosition.BOTTOM_START);
+    documentStub._contains = false;
+    toastrContainerRegistry.get(NbGlobalLogicalPosition.BOTTOM_START);
+
+    expect(overlayCreateSpy).toHaveBeenCalledTimes(2);
+  });
+
   it('should return the same position for top-end and top-right when ltr', () => {
     spyOn(positionHelper, 'toLogicalPosition')
       .and.returnValue(NbGlobalLogicalPosition.TOP_END);

diff --git a/src/framework/theme/components/toastr/toastr.service.ts b/src/framework/theme/components/toastr/toastr.service.ts
@@ -19,7 +19,7 @@ import { NbToastrContainerComponent } from './toastr-container.component';
 import { NB_TOASTR_CONFIG, NbToastrConfig } from './toastr-config';
 import { NbToast, NbToastStatus } from './model';
 import { NbToastComponent } from './toast.component';
-
+import { NB_DOCUMENT } from '../../theme.options';
 
 export class NbToastRef {
   constructor(private toastContainer: NbToastContainer,
@@ -35,6 +35,10 @@ export class NbToastContainer {
   protected toasts: NbToast[] = [];
   protected prevToast: NbToast;
 
+  get nativeElement() {
+    return this.containerRef.location.nativeElement;
+  }
+
   constructor(protected position: NbGlobalPosition,
               protected containerRef: ComponentRef<NbToastrContainerComponent>,
               protected positionHelper: NbPositionHelper) {
@@ -112,13 +116,15 @@ export class NbToastrContainerRegistry {
   constructor(protected overlay: NbOverlayService,
               protected positionBuilder: NbPositionBuilderService,
               protected positionHelper: NbPositionHelper,
-              protected cfr: ComponentFactoryResolver) {
+              protected cfr: ComponentFactoryResolver,
+              @Inject(NB_DOCUMENT) protected document: any) {
   }
 
   get(position: NbGlobalPosition): NbToastContainer {
     const logicalPosition: NbGlobalLogicalPosition = this.positionHelper.toLogicalPosition(position);
 
-    if (!this.overlays.has(logicalPosition)) {
+    const container = this.overlays.get(logicalPosition);
+    if (!container || !this.existsInDom(container)) {
       this.instantiateContainer(logicalPosition);
     }
 
@@ -136,6 +142,10 @@ export class NbToastrContainerRegistry {
     const containerRef = ref.attach(new NbComponentPortal(NbToastrContainerComponent, null, null, this.cfr));
     return new NbToastContainer(position, containerRef, this.positionHelper);
   }
+
+  protected existsInDom(toastContainer: NbToastContainer): boolean {
+    return this.document.contains(toastContainer.nativeElement);
+  }
 }
 
 /**