From 6472b6fe2d9d5c8b85baf059a72eeef47c2b8925 Mon Sep 17 00:00:00 2001
From: Dmitriy Shekhovtsov <valorkin@gmail.com>
Date: Fri, 18 Aug 2017 14:51:27 +0300
Subject: [PATCH] fix(datepicker): prevent outside click to close datepicker on
 navigation

---
 .../+datepicker/demos/bs-popup/date-picker-popup.ts        | 2 +-
 .../themes/bs/bs-datepicker-container.component.ts         | 7 +++++--
 .../themes/bs/bs-datepicker-navigation-view.component.ts   | 6 ++----
 .../themes/bs/bs-daterangepicker-container.component.ts    | 5 +++++
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
index 0066e72377..c10dea6af9 100644
--- a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
+++ b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './date-picker-popup.html'
 })
 export class DemoDatePickerPopupComponent {
-  public bsValue: any = new Date(2017, 7, 4);
+  public bsValue: any ;
   public bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
 }
diff --git a/src/datepicker/themes/bs/bs-datepicker-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-container.component.ts
index d8adef94d4..ff792b1eae 100644
--- a/src/datepicker/themes/bs/bs-datepicker-container.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-container.component.ts
@@ -12,7 +12,6 @@ import 'rxjs/add/operator/filter';
   providers: [BsDatepickerStore],
   template: `
     <bs-datepicker-view
-      *ngIf="months && options"
       [months]="months"
       [options]="options"
       (onNavigate)="navigateTo($event)"
@@ -21,6 +20,7 @@ import 'rxjs/add/operator/filter';
     ></bs-datepicker-view>
   `,
   host: {
+    '(click)': '_stopPropagation($event)',
     style: 'position: absolute; display: block;'
   }
 })
@@ -52,7 +52,6 @@ export class BsDatepickerContainerComponent {
       showWeekNumbers: true
     }));
 
-
     // on selected date change
     this._bsDatepickerStore.select(state => state.selectedDate)
       .subscribe(date => this.valueChange.emit(date));
@@ -109,4 +108,8 @@ export class BsDatepickerContainerComponent {
     }
     this._bsDatepickerStore.dispatch(this._actions.select(day.date));
   }
+
+  _stopPropagation(event: any): void {
+    event.stopPropagation();
+  }
 }
diff --git a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
index 07cfdb4759..b826ead653 100644
--- a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
@@ -9,9 +9,9 @@ import { BsNavigationEvent, MonthViewModel, TimeUnit } from '../../models/index'
             [style.visibility]="month.hideLeftArrow ? 'hidden' : 'visible'"
             (click)="navTo({month: -1})"><span>&lsaquo;</span>
     </button>
-    <button class="current" (click)="viewMode('months')"><span>{{month.monthTitle}}</span>
+    <button class="current"><span>{{ month.monthTitle }}</span>
     </button>
-    <button class="current" (click)="viewMode('years')"><span>{{month.yearTitle}}</span>
+    <button class="current"><span>{{ month.yearTitle }}</span>
     </button>
     <button class="next"
             [style.visibility]="month.hideRightArrow ? 'hidden' : 'visible'"
@@ -26,6 +26,4 @@ export class BsDatepickerNavigationViewComponent {
   navTo(step: TimeUnit): void {
     this.onNavigate.emit({step});
   }
-
-  viewMode(v: string) {}
 }
diff --git a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
index 4209c9870d..664193578b 100644
--- a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
+++ b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
@@ -21,6 +21,7 @@ import 'rxjs/add/operator/filter';
     ></bs-datepicker-view>
   `,
   host: {
+    '(click)': '_stopPropagation($event)',
     style: 'position: absolute; display: block;'
   }
 })
@@ -130,4 +131,8 @@ export class BsDaterangepickerContainerComponent implements OnInit {
       this._rangeStack = [];
     }
   }
+
+  _stopPropagation(event: any): void {
+    event.stopPropagation();
+  }
 }