From 710548348a90d941e6c08ef9dbcdd2fb9f4638f4 Mon Sep 17 00:00:00 2001
From: Katja Bregenzer <katja.bregenzer@lime.tech>
Date: Tue, 19 Feb 2019 13:29:41 +0100
Subject: [PATCH] fix(limel-date-picker): change picker value when changing the
 input

fix #297
---
 .../date-picker/pickers/MonthPicker.tsx         |  5 +++++
 src/components/date-picker/pickers/Picker.ts    | 17 +++++++++++++++--
 .../date-picker/pickers/QuarterPicker.tsx       |  5 +++++
 .../date-picker/pickers/YearPicker.tsx          |  9 +++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/pickers/MonthPicker.tsx b/src/components/date-picker/pickers/MonthPicker.tsx
index cdf3da928d..0c4a71fab9 100644
--- a/src/components/date-picker/pickers/MonthPicker.tsx
+++ b/src/components/date-picker/pickers/MonthPicker.tsx
@@ -45,6 +45,11 @@ export class MonthPicker extends Picker {
 
     protected handleClose(selectedDates) {
         super.handleClose(selectedDates);
+        this.selectMonth(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value,
+            this.flatpickr
+        );
         this.flatpickr.prevMonthNav.removeEventListener(
             'mousedown',
             this.prevYear
diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
index d7ffe58d42..508bbd3125 100644
--- a/src/components/date-picker/pickers/Picker.ts
+++ b/src/components/date-picker/pickers/Picker.ts
@@ -73,10 +73,23 @@ export abstract class Picker {
     }
 
     protected handleClose(selectedDates) {
-        const date = selectedDates[0]
+        const momentInputDate = moment(
+            this.flatpickr.input.value,
+            this.dateFormat
+        );
+        let pickerDate = selectedDates[0]
             ? new Date(selectedDates[0].toJSON())
             : null;
-        this.change.emit(date);
+        const isSameInput = momentInputDate.isSame(moment(pickerDate));
+        if (!isSameInput) {
+            if (momentInputDate.isValid()) {
+                pickerDate = momentInputDate.toDate();
+                this.flatpickr.setDate(pickerDate);
+            } else {
+                this.flatpickr.clear();
+            }
+        }
+        this.change.emit(pickerDate);
     }
 
     private getMomentLang() {
diff --git a/src/components/date-picker/pickers/QuarterPicker.tsx b/src/components/date-picker/pickers/QuarterPicker.tsx
index 55524eb092..1a77221e8c 100644
--- a/src/components/date-picker/pickers/QuarterPicker.tsx
+++ b/src/components/date-picker/pickers/QuarterPicker.tsx
@@ -46,6 +46,11 @@ export class QuarterPicker extends Picker {
 
     protected handleClose(selectedDates) {
         super.handleClose(selectedDates);
+        this.selectQuarter(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value,
+            this.flatpickr
+        );
         this.flatpickr.prevMonthNav.removeEventListener(
             'mousedown',
             this.prevYear
diff --git a/src/components/date-picker/pickers/YearPicker.tsx b/src/components/date-picker/pickers/YearPicker.tsx
index 4b2fa9ec64..08458590a9 100644
--- a/src/components/date-picker/pickers/YearPicker.tsx
+++ b/src/components/date-picker/pickers/YearPicker.tsx
@@ -18,6 +18,7 @@ export class YearPicker extends Picker {
     ) {
         super(dateFormat, language, change);
         this.handleChange = this.handleChange.bind(this);
+        this.handleClose = this.handleClose.bind(this);
         this.handleReady = this.handleReady.bind(this);
     }
 
@@ -36,6 +37,14 @@ export class YearPicker extends Picker {
         this.selectYear(selectedDates, dateString);
     }
 
+    protected handleClose(selectedDates) {
+        super.handleClose(selectedDates);
+        this.selectYear(
+            this.flatpickr.selectedDates,
+            this.flatpickr.input.value
+        );
+    }
+
     private handleReady(_, __, fp) {
         this.bootstrapYearPicker(fp);
         const inputValue = fp.input.value;