fix(ui5-step-input): fix change event firing in some cases (#6511)

Author: NHristov-sap

packages/main/src/StepInput.ts

@@ -436,6 +436,9 @@ class StepInput extends UI5Element implements IFormElement {
 
 	_onInputFocusIn() {
 		this._inputFocused = true;
+		if (this.value !== this._previousValue) {
+			this._previousValue = this.value;
+		}
 	}
 
 	_onInputFocusOut() {

packages/main/test/pages/StepInput.html

@@ -135,6 +135,22 @@ <h3>StepInput with valueState=Error</h3>
 		></ui5-step-input>
 	</div>
 
+	<div>
+		<h3>StepInput change event test</h3>
+		<ui5-step-input id="stepInputChange1"
+			class="stepinput2auto"
+			value="1"
+			min="1"
+			step="1000"
+		></ui5-step-input>
+		<ui5-step-input id="stepInputChange2"
+			class="stepinput2auto"
+			value="1000"
+			min="1"
+			step="1000"
+		></ui5-step-input>
+	</div>
+
 	<h3> 'change' event result</h3>
 	<ui5-input id="changeResult"></ui5-input>
 
@@ -156,6 +172,15 @@ <h3> 'change' event result</h3>
 		siCompact.addEventListener('ui5-change', displayChange);
 		siMinMax.addEventListener('ui5-change', displayChange);
 		siPrecision.addEventListener('ui5-change', displayChange);
+
+		stepInputChange1.addEventListener('ui5-change', function(e) {
+			const val = Number.parseInt(e.target.value, 10);
+			stepInputChange2.value = val + 999;
+			displayChange(e);
+		});
+
+		stepInputChange2.addEventListener('ui5-change', displayChange);
+
 	</script>
 
 </body>

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

@@ -433,6 +433,29 @@ describe("'change' event firing", () => {
 		assert.strictEqual(await siMinMax.getProperty("value"), 0, "Value is increased correctly to 1");
 		assert.strictEqual(Number(await changeResult.getProperty("value")), 2, "'change' event is fired 2 times");
 	});
+
+	it("'change' event should be fired after changing value programatically and then manual entry of the previous value and focus out", async () => {
+		await browser.url(`test/pages/StepInput.html`);
+		const siChange1 = await browser.$("#stepInputChange1");
+		const siChange2 = await browser.$("#stepInputChange2");
+		const incButton = await siChange1.shadow$(".ui5-step-inc");
+		const initValue1 = await siChange1.getProperty("value");
+		const initValue2 = await siChange2.getProperty("value");
+		const changeResult = await browser.$("#changeResult");
+
+		await incButton.click();
+		const newValue1 = await siChange1.getProperty("value");
+		assert.strictEqual(await siChange1.getProperty("value"), initValue1 + 1000, "Value of the first step input is increased correctly to " + (initValue1 + 1000));
+		assert.strictEqual(await siChange2.getProperty("value"), newValue1 + 999, "Value of the second step input is increased correctly to " + (newValue1 + 999));
+		assert.strictEqual(Number(await changeResult.getProperty("value")), 1, "'change' event is fired 1 time");
+
+		await siChange2.doubleClick();
+		await siChange2.keys(initValue2.toString());
+		await siChange2.keys("Tab");
+		assert.strictEqual(await siChange2.getProperty("value"), initValue2, "Value of the second step input is set correctly to " + initValue2);
+		assert.strictEqual(Number(await changeResult.getProperty("value")), 2, "'change' event is fired 2 times");
+	});
+
 });
 
 describe("Accessibility related parameters", async () => {
@@ -457,4 +480,4 @@ describe("Accessibility related parameters", async () => {
 		assert.strictEqual(await siInner.getAttribute("aria-label"), "test-aria-label", "'aria-label' attribute exists and has correct value 'test-aria-label'");
 	});
 
-});
+});