From 7395dc36e09c48116224143917fc5ea606ed01cc Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Fri, 10 Jun 2022 14:19:11 +0300
Subject: [PATCH] feat(ui5-datetime-picker): make change events preventable
 (#5286)

 feat(ui5-datetime-picker): make change event preventable

fixes: #4684
fixes: #5121
---
 packages/main/src/DateTimePicker.js             | 16 ++++++----------
 packages/main/test/pages/DateTimePicker.html    |  8 ++++++--
 packages/main/test/specs/DateTimePicker.spec.js | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js
index 8c7103dc3d42..39adf531e3fb 100644
--- a/packages/main/src/DateTimePicker.js
+++ b/packages/main/src/DateTimePicker.js
@@ -318,7 +318,6 @@ class DateTimePicker extends DatePicker {
 	onSelectedDatesChange(event) {
 		event.preventDefault();
 		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
-
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: event.detail.timestamp,
@@ -362,15 +361,10 @@ class DateTimePicker extends DatePicker {
 		const selectedDate = this.getSelectedDateTime();
 
 		const value = this.getFormat().format(selectedDate);
-		const valid = this.isValid(value);
-
 		if (this.value !== value) {
-			this.value = value;
-			this.fireEvent("change", { value: this.value, valid });
-			this.fireEvent("value-changed", { value: this.value, valid });
+			this._updateValueAndFireEvents(value, true, ["change", "value-changed"]);
 		}
 
-		this._updateValueState();
 		this.closePicker();
 	}
 
@@ -420,9 +414,11 @@ class DateTimePicker extends DatePicker {
 	getSelectedDateTime() {
 		const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
 		const selectedTime = this.getFormat().parse(this._timeSelectionValue);
-		selectedDate.setHours(selectedTime.getHours());
-		selectedDate.setMinutes(selectedTime.getMinutes());
-		selectedDate.setSeconds(selectedTime.getSeconds());
+		if (selectedTime) {
+			selectedDate.setHours(selectedTime.getHours());
+			selectedDate.setMinutes(selectedTime.getMinutes());
+			selectedDate.setSeconds(selectedTime.getSeconds());
+		}
 
 		return selectedDate;
 	}
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
index 2bc3a4b628a2..36873cabdfe9 100644
--- a/packages/main/test/pages/DateTimePicker.html
+++ b/packages/main/test/pages/DateTimePicker.html
@@ -56,8 +56,8 @@
 
 		<br><ui5-label>yyyy-MM-dd-hh:mm:ss aa</ui5-label><br>
 		<ui5-datetime-picker
+			id="dtPreventDefault"
 			format-pattern="yyyy-MM-dd-hh:mm:ss aa"
-			value="2020-04-13-04:16:16 AM"
 		></ui5-datetime-picker>
 
 		<br>
@@ -167,7 +167,11 @@
 		var counter = 0;
 		dt1.addEventListener("ui5-change", function(event) {
 			input1.value = ++counter;
-			input2.value = "{ value: " + dt1.value + " , valid: " + event.detail.valid + " }";
+			input2.value = "{ value: " + event.detail.value + " , valid: " + event.detail.valid + " }";
+		});
+
+		dtPreventDefault.addEventListener("ui5-change", function(event) {
+			event.preventDefault();
 		});
 
 		var counter2 = 0;
diff --git a/packages/main/test/specs/DateTimePicker.spec.js b/packages/main/test/specs/DateTimePicker.spec.js
index ee2b45066e24..42213e5c59c8 100644
--- a/packages/main/test/specs/DateTimePicker.spec.js
+++ b/packages/main/test/specs/DateTimePicker.spec.js
@@ -278,4 +278,20 @@ describe("DateTimePicker general interaction", () => {
 		// assert
 		assert.strictEqual(await picker.shadow$("ui5-input").getValue(), "Sha. 17, 1443 AH, 10:27:26 AM", "Value change is applied.");
 	});
+
+	it("tests change event is prevented on submit when prevent default is called", async () => {
+		// test submit from empty value to current date/time value
+		await openPickerById("dtPreventDefault");
+
+		const picker = await getPicker("dtPreventDefault");
+		const pickerInput = await browser.$("#dtPreventDefault");
+		const submitBtn = await getSubmitButton("dtPreventDefault");
+
+		// act
+		await picker.$("ui5-calendar").shadow$("ui5-daypicker").shadow$("[data-sap-focus-ref]").click(); // select a date to enable the OK button
+		await submitBtn.click();
+
+		// assert
+		assert.strictEqual(await pickerInput.getProperty("value"), "", "Value should not be set");
+	});
 });