fix(datepicker): schedule positioning calculations correctly

Popper is now created outside Angular and updates are scheduled only after datepicker is shown.
ng-bootstrap · May 17, 2022 · 745a64d · 745a64d
1 parent 077047e
commit 745a64d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -1,6 +1,7 @@
 import {TestBed, ComponentFixture, fakeAsync, tick, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {createGenericTestComponent} from '../test/common';
+import createSpy = jasmine.createSpy;
 
 import {Component, Injectable} from '@angular/core';
 import {FormsModule, NgForm} from '@angular/forms';
@@ -125,6 +126,26 @@ describe('NgbInputDatepicker', () => {
 
     it('should support the "position" option',
        () => { createTestCmpt(`<input ngbDatepicker #d="ngbDatepicker" [placement]="'bottom-right'">`); });
+
+    it('should cleanup datepicker when parent container is destroyed', () => {
+      const fixture = createTestCmpt(`
+          <ng-template [ngIf]="show">
+            <input ngbDatepicker #d="ngbDatepicker">
+          </ng-template>`);
+      const datepicker = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+
+      datepicker.open();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelector('ngb-datepicker')).not.toBeNull();
+
+      const closedSpy = createSpy();
+      datepicker.closed.subscribe(closedSpy);
+
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
+      expect(closedSpy).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('ngModel interactions', () => {
@@ -1157,6 +1178,7 @@ class TestComponent {
   maxDate: NgbDateStruct;
   isDisabled;
   popupClass = 'my-datepicker-popup';
+  show = true;
 
   onNavigate(params) {}
 

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -40,7 +40,6 @@ import {NgbDateStruct} from './ngb-date-struct';
 import {NgbInputDatepickerConfig} from './datepicker-input-config';
 import {NgbDatepickerConfig} from './datepicker-config';
 import {isString} from '../util/util';
-import {take} from 'rxjs/operators';
 import {Subject} from 'rxjs';
 import {addPopperOffset} from '../util/positioning-util';
 
@@ -290,7 +289,6 @@ export class NgbInputDatepicker implements OnChanges,
       @Inject(DOCUMENT) private _document: any, private _changeDetector: ChangeDetectorRef,
       config: NgbInputDatepickerConfig) {
     ['autoClose', 'container', 'positionTarget', 'placement'].forEach(input => this[input] = config[input]);
-    this._zoneSubscription = _ngZone.onStable.subscribe(() => this._positioning.update());
   }
 
   registerOnChange(fn: (value: any) => any): void { this._onChange = fn; }
@@ -388,7 +386,8 @@ export class NgbInputDatepicker implements OnChanges,
         hostElement = this._elRef.nativeElement;
       }
 
-      this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+      // Setting up popper and scheduling updates when zone is stable
+      this._ngZone.runOutsideAngular(() => {
         if (this._cRef) {
           this._positioning.createPopper({
             hostElement,
@@ -397,6 +396,8 @@ export class NgbInputDatepicker implements OnChanges,
             appendToBody: this.container === 'body',
             updatePopperOptions: addPopperOffset([0, 2])
           });
+
+          this._zoneSubscription = this._ngZone.onStable.subscribe(() => this._positioning.update());
         }
       });
 
@@ -415,6 +416,8 @@ export class NgbInputDatepicker implements OnChanges,
     if (this.isOpen()) {
       this._vcRef.remove(this._vcRef.indexOf(this._cRef !.hostView));
       this._cRef = null;
+      this._positioning.destroy();
+      this._zoneSubscription ?.unsubscribe();
       this._destroyCloseHandlers$.next();
       this.closed.emit();
       this._changeDetector.markForCheck();
@@ -433,8 +436,6 @@ export class NgbInputDatepicker implements OnChanges,
       } else {
         this._document.body.focus();
       }
-
-      this._positioning.destroy();
     }
   }
 
@@ -492,10 +493,7 @@ export class NgbInputDatepicker implements OnChanges,
     }
   }
 
-  ngOnDestroy() {
-    this.close();
-    this._zoneSubscription.unsubscribe();
-  }
+  ngOnDestroy() { this.close(); }
 
   private _applyDatepickerInputs(datepickerInstance: NgbDatepicker): void {
     ['dayTemplate', 'dayTemplateData', 'displayMonths', 'firstDayOfWeek', 'footerTemplate', 'markDisabled', 'minDate',