fix(ui5-wizard): observe content height changes (#2801)

Issue: When the step content size is changed runtime, step selection might go wrong as the steps' scroll positions are out of sync - the wizard works with the old ones.
Solution: Observe steps and update state to store steps' scroll positions.

FIXES: #2784

Author: ilhan007

packages/fiori/src/Wizard.js

@@ -63,6 +63,14 @@ const metadata = {
 			type: Float,
 		},
 
+		/**
+		 * Defines the height of the <code>ui5-wizard</code> content.
+		 * @private
+		 */
+		contentHeight: {
+			type: Float,
+		},
+
 		_groupedTabs: {
 			type: String,
 			multiple: true,
@@ -203,7 +211,7 @@ class Wizard extends UI5Element {
 			getItemsCallback: () => this.enabledStepsInHeaderDOM,
 		});
 
-		this._onResize = this.onResize.bind(this);
+		this._onStepResize = this.onStepResize.bind(this);
 
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
@@ -260,19 +268,15 @@ class Wizard extends UI5Element {
 	}
 
 	static get CONTENT_TOP_OFFSET() {
-		return 80;
+		return 32;
 	}
 
 	static get staticAreaTemplate() {
 		return WizardPopoverTemplate;
 	}
 
-	onEnterDOM() {
-		ResizeHandler.register(this, this._onResize);
-	}
-
 	onExitDOM() {
-		ResizeHandler.deregister(this, this._onResize);
+		this.detachStepsResizeObserver();
 	}
 
 	onBeforeRendering() {
@@ -282,6 +286,7 @@ class Wizard extends UI5Element {
 	onAfterRendering() {
 		this.storeStepScrollOffsets();
 		this.scrollToSelectedStep();
+		this.attachStepsResizeObserver();
 	}
 
 	/**
@@ -402,19 +407,33 @@ class Wizard extends UI5Element {
 	}
 
 	/**
-	 * Handles component resize  to:
-	 * (1) trigger scroll scrollOffset reCalculation and syncSelection
-	 * (2) hide steps' separators and texts to free more space on small sizes
+	 * Handles resize in order to:
+	 * (1) sync steps' scroll offset and selection
+	 * (2) adapt navition step header
 	 * @private
 	 */
-	onResize() {
+	onStepResize() {
 		this.width = this.getBoundingClientRect().width;
+		this.contentHeight = this.getContentHeight();
 
 		if (this.responsivePopover && this.responsivePopover.opened) {
 			this._closeRespPopover();
 		}
 	}
 
+	attachStepsResizeObserver() {
+		this.stepsDOM.forEach(stepDOM => {
+			ResizeHandler.deregister(stepDOM, this._onStepResize);
+			ResizeHandler.register(stepDOM, this._onStepResize);
+		});
+	}
+
+	detachStepsResizeObserver() {
+		this.stepsDOM.forEach(stepDOM => {
+			ResizeHandler.deregister(stepDOM, this._onStepResize);
+		});
+	}
+
 	/**
 	 * Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
 	 * @private
@@ -600,6 +619,20 @@ class Wizard extends UI5Element {
 		}
 	}
 
+	getContentHeight() {
+		let contentHeight = 0;
+
+		this.stepsDOM.forEach(step => {
+			contentHeight += step.getBoundingClientRect().height;
+		});
+
+		return contentHeight;
+	}
+
+	get stepsDOM() {
+		return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
+	}
+
 	get _stepsInHeader() {
 		return this.getStepsInfo();
 	}
@@ -826,7 +859,7 @@ class Wizard extends UI5Element {
 			}
 		}
 
-		return 0;
+		return this.selectedStepIndex;
 	}
 
 	/**

packages/fiori/src/themes/Wizard.css

@@ -14,7 +14,7 @@
 .ui5-wiz-content {
 	position: relative;
 	overflow: auto;
-	height: 100%;
+	height: calc(100% - 4rem); /* the navigation height is 4rem */
 	box-sizing: border-box;
 	background: var(--sapBackgroundColor);
 }

packages/fiori/test/pages/Wizard_test.html

@@ -42,6 +42,7 @@
 					</ui5-label>
 
 					<ui5-input id="inpSelectionChangeCounter"></ui5-input>
+					<ui5-button id="btnOpenDialog" style="width: 150px; align-self: flex-end;">Open Wizard Dialog</ui5-button>
 				</div>
 
 				<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
@@ -78,6 +79,9 @@
 							<ui5-label>5 years guarantee included</ui5-label>
 							<ui5-switch id="sw"></ui5-switch>
 						</div>
+
+						<div id="pureContent" style="height: 1800px; background-color: red; display:none;">
+						</div>
 					</div>
 				</div>
 
@@ -122,6 +126,7 @@
 					</div>
 				</div>
 
+				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
 				<ui5-button id="toStep4" design="Emphasized">Step 4</ui5-button>
 			</ui5-wizard-step>
 
@@ -156,6 +161,140 @@
 				<ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
 			</ui5-wizard-step>
 		</ui5-wizard>
+
+		<ui5-dialog id="dialog" stretch header-heading="Wizard">
+				<ui5-wizard>
+					<ui5-wizard-step icon="sap-icon://product" selected heading="Product type">
+						<div style="display: flex; min-height: 200px; flex-direction: column;">
+							<ui5-title>1. Product Type</ui5-title><br>
+		
+							<ui5-messagestrip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-messagestrip><br>
+		
+							<ui5-label wrap>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
+							</ui5-label>
+		
+							<ui5-input></ui5-input>
+						</div>
+		
+						<ui5-button design="Emphasized">Step 2</ui5-button>
+					</ui5-wizard-step>
+		
+					<ui5-wizard-step heading="Product Information">
+						<div style="display: flex;flex-direction: column">
+							<ui5-title>2. Product Information</ui5-title><br>
+							<ui5-label wrap>
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+		
+							<div style="display: flex; flex-direction: column;">
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Name</ui5-label>
+									<ui5-input placeholder="product name..."></ui5-input>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
+									<ui5-label>Weight</ui5-label>
+									<ui5-input value="3.65"></ui5-input>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
+									<ui5-label>Manifacturer</ui5-label>
+									<ui5-select>
+										<ui5-option selected>Apple</ui5-option>
+										<ui5-option>Samsung</ui5-option>
+										<ui5-option>Huawei</ui5-option>
+									</ui5-select>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
+									<ui5-label>5 years guarantee included</ui5-label>
+									<ui5-switch id="sw2"></ui5-switch>
+								</div>
+		
+		
+								<div id="pureContent2" style="height: 1800px; background-color: red; display:none;">
+								</div>
+							</div>
+						</div>
+		
+						<ui5-button design="Emphasized">Step 3</ui5-button>
+					</ui5-wizard-step>
+		
+					<ui5-wizard-step heading="Options">
+						<div style="display: flex; flex-direction: column;">
+							<ui5-title>3. Options</ui5-title><br>
+		
+							<ui5-label wrap>
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+							<ui5-messagestrip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-messagestrip><br>
+		
+							<div style="display: flex; flex-direction: column;">
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Manifacture date</ui5-label>
+									<ui5-date-picker></ui5-date-picker>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Availability</ui5-label>
+									<ui5-segmentedbutton>
+										<ui5-togglebutton icon="employee" pressed>In stock</ui5-togglebutton>
+										<ui5-togglebutton>In depot</ui5-togglebutton>
+										<ui5-togglebutton>Damaged</ui5-togglebutton>
+										<ui5-togglebutton>Out of stock</ui5-togglebutton>
+									</ui5-segmentedbutton>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Size</ui5-label>
+									<ui5-segmentedbutton>
+										<ui5-togglebutton icon="employee" pressed>Small</ui5-togglebutton>
+										<ui5-togglebutton>Medium</ui5-togglebutton>
+										<ui5-togglebutton>Largr</ui5-togglebutton>
+									</ui5-segmentedbutton>
+								</div>
+							</div>
+						</div>
+		
+						<ui5-button design="Emphasized">Step 4</ui5-button>
+					</ui5-wizard-step>
+		
+					<ui5-wizard-step heading="Pricing">
+						<div style="display: flex; flex-direction: column;">
+							<ui5-title>4. Pricing</ui5-title><br>
+							<ui5-label wrap>
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+							<ui5-messagestrip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-messagestrip><br>
+		
+							<div style="display: flex; flex-direction: column;">
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Price</ui5-label>
+									<ui5-input placeholder="product price..."></ui5-input>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
+									<ui5-label>Quantity</ui5-label>
+									<ui5-input placeholder="product quantity..."></ui5-input>
+								</div>
+		
+								<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
+									<ui5-label>Vat included</ui5-label>
+									<ui5-switch checked></ui5-switch>
+								</div>
+							</div>
+						</div>
+		
+						<ui5-button design="Emphasized">Finalize</ui5-button>
+					</ui5-wizard-step>
+				</ui5-wizard>
+		</ui5-dialog>
 	</div>
 
 	<script>
@@ -169,19 +308,20 @@
 		toStep2.addEventListener("click", function () {
 			deselectAll();
 			setStep(1);
-			toStep2.setAttribute("hidden", true);
+		});
+		toStep22.addEventListener("click", function () {
+			deselectAll();
+			setStep(1);
 		});
 
 		toStep3.addEventListener("click", function () {
 			deselectAll();
 			setStep(2);
-			toStep3.setAttribute("hidden", true);
 		});
 
 		toStep4.addEventListener("click", function () {
 			deselectAll();
 			setStep(3);
-			toStep4.setAttribute("hidden", true);
 		});
 
 		function deselectAll() {
@@ -199,6 +339,18 @@
 		function getStep(idx) {
 			return Array.from(wiz.children)[idx];
 		}
+
+		sw.addEventListener("change", function () {
+			pureContent.style.display = "block";
+		});
+
+		sw2.addEventListener("change", function () {
+			pureContent2.style.display = "block";
+		});
+
+		btnOpenDialog.addEventListener("click", function () {
+			dialog.open();
+		});
 	</script>
 </body>
 </html>

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

@@ -150,6 +150,29 @@ describe("Wizard general interaction", () => {
 		assert.strictEqual(step2InHeader.getAttribute("disabled"), null, "Second step in header is enabled.");
 
 		assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "4",
-			"Event selection-change fired 4rd time due to scrolling.");
+			"Event selection-change fired 4th time due to scrolling.");
+	});
+
+	it("tests dynamically increase step size and move to next step", () => {
+		const wiz = browser.$("#wizTest");
+		const sw = browser.$("#sw");
+		const btnToStep2 = browser.$("#toStep22");
+		const btnToStep3 = browser.$("#toStep3");
+		const step3 = browser.$("#st3");
+		const step3InHeader = wiz.shadow$(`[data-ui5-index="3"]`);
+		const inpSelectionChangeCounter =  browser.$("#inpSelectionChangeCounter");
+
+		btnToStep3.click(); // click to enable step 3
+		btnToStep2.click(); // click to get back to step 2
+		sw.click(); // click to dynamically expand content in step 2
+		step3.scrollIntoView(); // scroll to step 3
+		browser.pause(500);
+
+		assert.strictEqual(step3.getAttribute("selected"), "true",
+			"Third step in the content is selected.");
+		assert.strictEqual(step3InHeader.getAttribute("selected"), "true",
+			"Third step in the header is selected.");
+		assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "5",
+			"Event selection-change fired once for 5th time due to scrolling.");
 	});
 });