From 593c896c989f8d5876776bab27f5a694e6491016 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Wed, 11 Aug 2021 09:08:07 +0300
Subject: [PATCH 1/2] fix(ui5-date-picker): setting value before firing event

---
 packages/main/src/DatePicker.js                    | 6 +++++-
 packages/main/test/pages/DatePicker.html           | 1 +
 packages/main/test/pages/DatePicker_test_page.html | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 96eb24f7146b..1d38652328b6 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -513,6 +513,10 @@ class DatePicker extends DateComponentBase {
 		}
 
 		let executeEvent = true;
+		const previousValue = this.value;
+		if (updateValue) {
+			this.value = value;
+		}
 
 		events.forEach(event => {
 			if (!this.fireEvent(event, { value, valid }, true)) {
@@ -521,11 +525,11 @@ class DatePicker extends DateComponentBase {
 		});
 
 		if (!executeEvent) {
+			this.value = previousValue;
 			return;
 		}
 
 		if (updateValue) {
-			this.value = value;
 			this._updateValueState(); // Change the value state to Error/None, but only if needed
 		}
 	}
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index b0f2c57d70e8..f6123fac8de4 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -154,6 +154,7 @@ <h3>DatePicker with properties given in the wrong format</h3>
 
 		dp.addEventListener('ui5-change', function(e) {
 			console.log('change: ', e.detail);
+			debugger;
 			labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
 		});
 		dp.addEventListener('ui5-input', function(e) {
diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
index 57aa90ad8af7..5b264b31fa61 100644
--- a/packages/main/test/pages/DatePicker_test_page.html
+++ b/packages/main/test/pages/DatePicker_test_page.html
@@ -105,7 +105,7 @@ <h3>Test accessibleName and accessibleNameRef</h3>
 		document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
 		document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
 			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
-			document.querySelector('#lblTomorrowDate').innerHTML = e.detail.value;
+			document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
 		});
 
 		var dp16 = document.getElementById('dp16');

From 7af18cf4608bb5b43066d522e13aaeaec87387fb Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Mon, 23 Aug 2021 16:44:04 +0300
Subject: [PATCH 2/2] comments respond

---
 packages/main/src/DatePicker.js                    | 13 ++++++-------
 packages/main/test/pages/DatePicker_test_page.html |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 1d38652328b6..c3e5f814fb75 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -413,6 +413,8 @@ class DatePicker extends DateComponentBase {
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		this.liveValue = this.value;
 	}
 
 	/**
@@ -513,10 +515,7 @@ class DatePicker extends DateComponentBase {
 		}
 
 		let executeEvent = true;
-		const previousValue = this.value;
-		if (updateValue) {
-			this.value = value;
-		}
+		this.liveValue = value;
 
 		events.forEach(event => {
 			if (!this.fireEvent(event, { value, valid }, true)) {
@@ -525,11 +524,11 @@ class DatePicker extends DateComponentBase {
 		});
 
 		if (!executeEvent) {
-			this.value = previousValue;
 			return;
 		}
 
 		if (updateValue) {
+			this.value = value;
 			this._updateValueState(); // Change the value state to Error/None, but only if needed
 		}
 	}
@@ -776,11 +775,11 @@ class DatePicker extends DateComponentBase {
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
+		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
 	}
 
 	get dateValueUTC() {
-		return this.getFormat().parse(this.value, true);
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
 	}
 
 	get styles() {
diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
index 5b264b31fa61..71a48f21e304 100644
--- a/packages/main/test/pages/DatePicker_test_page.html
+++ b/packages/main/test/pages/DatePicker_test_page.html
@@ -105,7 +105,7 @@ <h3>Test accessibleName and accessibleNameRef</h3>
 		document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
 		document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
 			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
-			document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
+			document.querySelector('#lblTomorrowDate').innerHTML = e.target.liveValue;
 		});
 
 		var dp16 = document.getElementById('dp16');