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

…2922) Fixes: #2827
SAP · Aug 9, 2021 · 38a90ba · 38a90ba
1 parent 1eb7206
commit 38a90ba
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -471,14 +471,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 });
 		});
@@ -521,7 +525,7 @@ class DatePicker extends DateComponentBase {
 	 * @protected
 	 */
 	async _onInputInput(event) {
-		this._updateValueAndFireEvents(event.target.value, false, ["input"]);
+		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
 	}
 
 	/**

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -609,9 +609,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");
 
@@ -622,12 +622,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");
@@ -640,21 +640,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");
@@ -667,10 +663,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();
@@ -917,4 +910,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");
+	});
 });