fix(ui5-date-picker): does not trigger value verification upon typing(#2922)

Fixes: #2827

Author: tsanislavgatev

packages/main/src/DatePicker.js

@@ -482,14 +482,18 @@ class DatePicker extends DateComponentBase {
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 	}
 
-	_updateValueAndFireEvents(value, normalizeValue, events) {
+	_updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
 		const valid = this._checkValueValidity(value);
+
 		if (valid && normalizeValue) {
 			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
 		}
 
-		this.value = value;
-		this._updateValueState(); // Change the value state to Error/None, but only if needed
+		if (updateValue) {
+			this.value = value;
+			this._updateValueState(); // Change the value state to Error/None, but only if needed
+		}
+
 		events.forEach(event => {
 			this.fireEvent(event, { value, valid });
 		});
@@ -532,7 +536,7 @@ class DatePicker extends DateComponentBase {
 	 * @protected
 	 */
 	async _onInputInput(event) {
-		this._updateValueAndFireEvents(event.target.value, false, ["input"]);
+		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
 	}
 
 	/**

packages/main/test/specs/DatePicker.spec.js

@@ -610,9 +610,9 @@ describe("Date Picker Tests", () => {
 	it("Going under the minimum date changes value state", () => {
 		datepicker.id = "#dp33";
 
-		datepicker.input.click();
-		datepicker.root.keys("Jan 1, 1999");
-		datepicker.root.keys("Enter");
+		datepicker.innerInput.click();
+		datepicker.innerInput.keys("Jan 1, 1999");
+		datepicker.innerInput.keys("Enter");
 
 		assert.equal(datepicker.input.getProperty("valueState"), "Error", "value state of the input is valid");
 
@@ -623,12 +623,12 @@ describe("Date Picker Tests", () => {
 	it("Going over the maximum date changes value state", () => {
 		datepicker.id = "#dp33";
 
-		datepicker.input.click();
-		while(datepicker.root.getValue() !== ""){
-			datepicker.root.keys("Backspace");
+		datepicker.innerInput.click();
+		while(datepicker.innerInput.getValue() !== ""){
+			datepicker.innerInput.keys("Backspace");
 		}
 
-		datepicker.root.keys("May 5, 2100");
+		datepicker.innerInput.keys("May 5, 2100");
 		datepicker.root.keys("Enter");
 
 		assert.equal(datepicker.input.getProperty("valueState"), "Error", "value state of the input is valid");
@@ -641,21 +641,17 @@ describe("Date Picker Tests", () => {
 		datepicker.id = "#dp33";
 
 		datepicker.input.click();
-		while(datepicker.root.getValue() !== ""){
-			datepicker.root.keys("Backspace");
+		while(datepicker.innerInput.getValue() !== ""){
+			datepicker.innerInput.keys("Backspace");
 		}
 
-		datepicker.root.keys("Jan 8, 2100");
+		datepicker.innerInput.keys("Jan 8, 2100");
 		datepicker.root.keys("Enter");
 
 		assert.equal(datepicker.input.getProperty("valueState"), "None", "value state of the input is valid");
 
 		datepicker.input.click();
-		while(datepicker.root.getValue() !== ""){
-			datepicker.root.keys("Backspace");
-		}
-
-		datepicker.root.keys("Jan 1, 2000");
+		datepicker.root.setProperty("value", "Jan 1, 2000");
 		datepicker.root.keys("Enter");
 
 		assert.equal(datepicker.input.getProperty("valueState"), "None", "value state of the input is valid");
@@ -668,10 +664,7 @@ describe("Date Picker Tests", () => {
 		datepicker.id = "#dp33";
 
 		datepicker.input.click();
-		while(datepicker.root.getValue() !== ""){
-			datepicker.root.keys("Backspace");
-		}
-		datepicker.root.keys("Jan 8, 2100");
+		datepicker.root.setProperty("value", "Jan 8, 2100");
 		datepicker.root.keys("Enter");
 
 		datepicker.openPicker();
@@ -918,4 +911,17 @@ describe("Date Picker Tests", () => {
 		browser.keys(["Control", "A"]);
 		browser.keys("Backspace");
 	});
+
+	it("Value state changes only on submit", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/DatePicker.html`);
+		datepicker.id = "#dp33";
+		datepicker.innerInput.click();
+		browser.keys("somereallylongtextthatshouldcheckifwevalidateoninput");
+
+		assert.equal(datepicker.input.getProperty("valueState"), "None", "value state of the input is valid");
+
+		browser.keys("Enter");
+
+		assert.equal(datepicker.input.getProperty("valueState"), "Error", "value state of the input is valid");
+	});
 });