fix(datepicker): fixed inline datepicker subscriptions (#6339)

* fix(datepicker): fixed inline datepicker subscriptions * fix(datepicker): updated subscriptions Co-authored-by: Dmitriy Shekhovtsov <valorkin@gmail.com>
valor-software · Jan 13, 2022 · 2e85bac · 2e85bac
1 parent df7bdba
commit 2e85bac
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 42 deletions.
diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts
@@ -111,8 +111,11 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
 
   ngOnInit(): void {
     this.setConfig();
+    this.initSubscribes();
+  }
 
-    // if date changes from external source (model -> view)
+  initSubscribes() {
+    this.unsubscribeSubscriptions();
     this._subs.push(
       this.bsValueChange.subscribe((value: Date) => {
         if (this._datepickerRef) {
@@ -121,7 +124,6 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       })
     );
 
-    // if date changes from picker (view -> model)
     if (this._datepickerRef) {
       this._subs.push(
         this._datepickerRef.instance.valueChange.subscribe((value: Date) => {
@@ -131,6 +133,13 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
     }
   }
 
+  unsubscribeSubscriptions() {
+    if (this._subs?.length) {
+      this._subs.map(sub => sub.unsubscribe());
+      this._subs.length = 0;
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes["bsConfig"]) {
       if (changes["bsConfig"].currentValue?.initCurrentTime && changes["bsConfig"].currentValue?.initCurrentTime !== changes["bsConfig"].previousValue?.initCurrentTime && this._bsValue) {
@@ -201,9 +210,12 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       .attach(BsDatepickerInlineContainerComponent)
       .to(this._elementRef)
       .show();
+
+    this.initSubscribes();
   }
 
   ngOnDestroy() {
     this._datepicker.dispose();
+    this.unsubscribeSubscriptions();
   }
 }
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
@@ -224,6 +224,27 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
     }
   }
 
+  initSubscribes() {
+    // if date changes from external source (model -> view)
+    this._subs.push(
+      this.bsValueChange.subscribe((value: Date) => {
+        if (this._datepickerRef) {
+          this._datepickerRef.instance.value = value;
+        }
+      })
+    );
+
+    // if date changes from picker (view -> model)
+    if (this._datepickerRef) {
+      this._subs.push(
+        this._datepickerRef.instance.valueChange.subscribe((value: Date) => {
+          this.bsValue = value;
+          this.hide();
+        })
+      );
+    }
+  }
+
   ngAfterViewInit(): void {
     this.isOpen$.pipe(
       filter(isOpen => isOpen !== this.isOpen),
@@ -250,24 +271,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
       .position({ attachment: this.placement })
       .show({ placement: this.placement });
 
-    // if date changes from external source (model -> view)
-    this._subs.push(
-      this.bsValueChange.subscribe((value: Date) => {
-        if (this._datepickerRef) {
-          this._datepickerRef.instance.value = value;
-        }
-      })
-    );
-
-    // if date changes from picker (view -> model)
-    if (this._datepickerRef) {
-      this._subs.push(
-        this._datepickerRef.instance.valueChange.subscribe((value: Date) => {
-          this.bsValue = value;
-          this.hide();
-        })
-      );
-    }
+    this.initSubscribes();
   }
 
   /**
@@ -318,12 +322,20 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
     });
   }
 
+  unsubscribeSubscriptions() {
+    if (this._subs?.length) {
+      this._subs.map(sub => sub.unsubscribe());
+      this._subs.length = 0;
+    }
+  }
+
   ngOnDestroy(): void {
     this._datepicker.dispose();
     this.isOpen$.next(false);
     if (this.isDestroy$) {
       this.isDestroy$.next(null);
       this.isDestroy$.complete();
     }
+    this.unsubscribeSubscriptions();
   }
 }
diff --git a/src/datepicker/bs-daterangepicker-inline.component.ts b/src/datepicker/bs-daterangepicker-inline.component.ts
@@ -101,28 +101,7 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
 
     ngOnInit(): void {
         this.setConfig();
-
-        // if date changes from external source (model -> view)
-        this._subs.push(
-          this.bsValueChange.subscribe((value: Date[]) => {
-            if (this._datepickerRef) {
-              this._datepickerRef.instance.value = value;
-            }
-          })
-        );
-
-        // if date changes from picker (view -> model)
-      if (this._datepickerRef) {
-        this._subs.push(
-          this._datepickerRef.instance.valueChange
-            .pipe(
-              filter((range: Date[]) => range && range[0] && !!range[1])
-            )
-            .subscribe((value: Date[]) => {
-              this.bsValue = value;
-            })
-        );
-      }
+        this.initSubscribes();
     }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -196,9 +175,44 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
         .attach(BsDaterangepickerInlineContainerComponent)
         .to(this._elementRef)
         .show();
+
+      this.initSubscribes();
+    }
+
+  initSubscribes() {
+    this.unsubscribeSubscriptions();
+    // if date changes from external source (model -> view)
+    this._subs.push(
+      this.bsValueChange.subscribe((value: Date[]) => {
+        if (this._datepickerRef) {
+          this._datepickerRef.instance.value = value;
+        }
+      })
+    );
+
+    // if date changes from picker (view -> model)
+    if (this._datepickerRef) {
+      this._subs.push(
+        this._datepickerRef.instance.valueChange
+          .pipe(
+            filter((range: Date[]) => range && range[0] && !!range[1])
+          )
+          .subscribe((value: Date[]) => {
+            this.bsValue = value;
+          })
+      );
+    }
+  }
+
+  unsubscribeSubscriptions() {
+    if (this._subs?.length) {
+      this._subs.map(sub => sub.unsubscribe());
+      this._subs.length = 0;
     }
+  }
 
     ngOnDestroy() {
       this._datepicker.dispose();
+      this.unsubscribeSubscriptions();
     }
 }
diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
@@ -226,6 +226,10 @@ export class BsDaterangepickerDirective
       .position({ attachment: this.placement })
       .show({ placement: this.placement });
 
+    this.initSubscribes();
+  }
+
+  initSubscribes() {
     // if date changes from external source (model -> view)
     this._subs.push(
       this.bsValueChange.subscribe((value: Date[]) => {
@@ -303,12 +307,21 @@ export class BsDaterangepickerDirective
     this.show();
   }
 
+  unsubscribeSubscriptions() {
+    if (this._subs?.length) {
+      this._subs.map(sub => sub.unsubscribe());
+      this._subs.length = 0;
+    }
+  }
+
   ngOnDestroy(): void {
     this._datepicker.dispose();
     this.isOpen$.next(false);
     if (this.isDestroy$) {
       this.isDestroy$.next(null);
       this.isDestroy$.complete();
     }
+
+    this.unsubscribeSubscriptions();
   }
 }