From 889fab8f7f00a92503b7ca132198432ced81e41c Mon Sep 17 00:00:00 2001
From: Max Okorokov <max@okorokov.com>
Date: Fri, 24 Jan 2020 16:55:58 +0100
Subject: [PATCH] fix(datepicker): handle clicks correctly inside the <label>

Fixes #3557
---
 src/datepicker/datepicker-input.spec.ts | 19 +++++++++++++++++++
 src/datepicker/datepicker-month-view.ts |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
index 0349dac15e..0358f99040 100644
--- a/src/datepicker/datepicker-input.spec.ts
+++ b/src/datepicker/datepicker-input.spec.ts
@@ -59,6 +59,25 @@ describe('NgbInputDatepicker', () => {
     expectSameValues(inputDatepicker, config);
   });
 
+  it('should work when wrapped in the <label> and toggled with (click)', () => {
+    const fixture = createTestCmpt(`
+      <label>
+        <input ngbDatepicker #d="ngbDatepicker" [startDate]="{year: 2018, month: 3}" (click)="d.toggle()">
+      </label>`);
+
+    const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+
+    // open
+    dpInput.open();
+    fixture.detectChanges();
+
+    // click on a date
+    fixture.nativeElement.querySelectorAll('.ngb-dp-day')[3].click();  // 1 MAR 2018
+    fixture.detectChanges();
+
+    expect(dpInput.isOpen()).toBe(false);
+  });
+
   describe('Custom config as provider', () => {
     const config = new NgbInputDatepickerConfig();
     customizeConfig(config);
diff --git a/src/datepicker/datepicker-month-view.ts b/src/datepicker/datepicker-month-view.ts
index ec902d2a1c..8005b3b5d1 100644
--- a/src/datepicker/datepicker-month-view.ts
+++ b/src/datepicker/datepicker-month-view.ts
@@ -19,7 +19,7 @@ import {DayTemplateContext} from './datepicker-day-template-context';
     <ng-template ngFor let-week [ngForOf]="month.weeks">
       <div *ngIf="!week.collapsed" class="ngb-dp-week" role="row">
         <div *ngIf="showWeekNumbers" class="ngb-dp-week-number small text-muted">{{ i18n.getWeekNumerals(week.number) }}</div>
-        <div *ngFor="let day of week.days" (click)="doSelect(day)" class="ngb-dp-day" role="gridcell"
+        <div *ngFor="let day of week.days" (click)="doSelect(day); $event.preventDefault()" class="ngb-dp-day" role="gridcell"
           [class.disabled]="day.context.disabled"
           [tabindex]="day.tabindex"
           [class.hidden]="day.hidden"