fix(ui5-wizard): prevent scrolling to step's very top (#2888)

On re-rendering the Wizard auto scrolls to the currently selected item's top, which is useful when the step selection is changed programatically. But, when re-rendering occurs for some other reason and the step selection remains the same, the Wizard still scrolls to the top of the selected step, which is not expected. Now, this is fixed by checking if the selection has been changed.

Fixes: #2883

Author: ilhan007

packages/fiori/src/Wizard.js

@@ -195,9 +195,12 @@ class Wizard extends UI5Element {
 		// Stores references to the grouped steps.
 		this._groupedTabs = [];
 
-		// Keeps track of the selected step index.
+		// Keeps track of the currently selected step index.
 		this.selectedStepIndex = 0;
 
+		// Keeps track of the previously selected step index.
+		this.previouslySelectedStepIndex = 0;
+
 		// Indicates that selection will be changed
 		// due to user click.
 		this.selectionRequestedByClick = false;
@@ -285,8 +288,13 @@ class Wizard extends UI5Element {
 
 	onAfterRendering() {
 		this.storeStepScrollOffsets();
-		this.scrollToSelectedStep();
+
+		if (this.previouslySelectedStepIndex !== this.selectedStepIndex) {
+			this.scrollToSelectedStep();
+		}
+
 		this.attachStepsResizeObserver();
+		this.previouslySelectedStepIndex = this.selectedStepIndex;
 	}
 
 	/**

packages/fiori/test/specs/Wizard.spec.js

@@ -175,4 +175,37 @@ describe("Wizard general interaction", () => {
 		assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "5",
 			"Event selection-change fired once for 5th time due to scrolling.");
 	});
+
+	it("tests no scrolling to selected step, if the selection was not changed", ()=>{
+		browser.url("http://localhost:8081/test-resources/pages/Wizard_test.html");
+
+		const wizard = browser.$("#wizTest");
+		const wizardContentDOM = wizard.shadow$(".ui5-wiz-content");
+		const btnToStep2 = browser.$("#toStep2");
+
+		// (1) - go to step 2
+		btnToStep2.click();
+
+		// (2) - scroll a bit upwards to get back to step 1 (at least its bottom part)
+		btnToStep2.scrollIntoView();
+
+		// (3) store the scroll position after scrolling upwards
+		const scrolPosBefore = browser.execute((wizardContentDOM) => {
+			return wizardContentDOM.scrollTop
+		}, wizardContentDOM);
+
+		// (4) simulate re-rendering
+		browser.execute((wizard) => {
+			wizard.onAfterRendering();
+		}, wizard);
+
+		// (5) store the scroll position after re-rendering
+		const scrolPosAfter = browser.execute((wizardContentDOM) => {
+			return wizardContentDOM.scrollTop
+		}, wizardContentDOM);
+
+		// assert - The Wizard did not scroll to the very top of the step 1
+		assert.strictEqual(scrolPosBefore, scrolPosAfter,
+			"No scrolling occures after re-rendering when the selected step remains the same.");
+	});
 });