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

@@ -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;
 	}

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;

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");
+	});
 });