feat(ui5-wizard): add parameter to selectionChange event (#3034)

For certain cases, it is useful to provide info if the selection-change is fired due to user's click on a step within the step navigation (as the selection might also occur due to scrolling). For that, we are introducing a new event parameter, called changeWithClick.
The parameter would be true, whenever the event is due to user click on a step within the step navigation header, and false when fired due to user scrolling.

Author: ilhan007

packages/fiori/src/Wizard.js

@@ -123,12 +123,14 @@ const metadata = {
 		 * @event sap.ui.webcomponents.fiori.Wizard#selection-change
 		 * @param {HTMLElement} selectedStep the newly selected step
 		 * @param {HTMLElement} previouslySelectedStep the previously selected step
+		 * @param {Boolean} changeWithClick the selection changed due to user's click on step within the navigation
 		 * @public
 		 */
 		"selection-change": {
 			detail: {
 				selectedStep: { type: HTMLElement },
 				previouslySelectedStep: { type: HTMLElement },
+				changeWithClick: { Boolean },
 			},
 		},
 	},
@@ -585,7 +587,7 @@ class Wizard extends UI5Element {
 		const selectedStep = this.selectedStep;
 		const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
 
-		this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
+		this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
 		this._closeRespPopover();
 		tabs[newlySelectedIndex].focus();
 	}
@@ -617,7 +619,8 @@ class Wizard extends UI5Element {
 		// change selection and fire "selection-change".
 		if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
 			const stepToSelect = this.slottedSteps[newlySelectedIndex];
-			this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex);
+
+			this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex, false);
 			this.selectionRequestedByScroll = true;
 		}
 	}
@@ -645,7 +648,7 @@ class Wizard extends UI5Element {
 
 		if (bExpanded || (!bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1))) {
 			// Change selection and fire "selection-change".
-			this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
+			this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
 		}
 	}
 
@@ -916,16 +919,18 @@ class Wizard extends UI5Element {
 	 * @param {HTMLElement} selectedStep the old step
 	 * @param {HTMLElement} stepToSelect the step to be selected
 	 * @param {Integer} stepToSelectIndex the index of the newly selected step
+	 * @param {Boolean} changeWithClick the selection changed due to user click in the step navigation
 	 * @private
 	 */
-	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex) {
+	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
 		if (selectedStep && stepToSelect) {
 			selectedStep.selected = false;
 			stepToSelect.selected = true;
 
 			this.fireEvent("selection-change", {
 				selectedStep: stepToSelect,
 				previouslySelectedStep: selectedStep,
+				changeWithClick,
 			});
 
 			this.selectedStepIndex = stepToSelectIndex;

packages/fiori/test/pages/Wizard_test.html

@@ -65,6 +65,8 @@
 						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-input id="inpSelectionChangeCause" placeholder="step changed via click"></ui5-input>
+
 					<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>
@@ -310,9 +312,10 @@
 	<script>
 		var wiz = document.getElementById("wizTest");
 		var counter = 0;
-		wiz.addEventListener("selection-change", function () {
+		wiz.addEventListener("ui5-selection-change", function (event) {
 			console.log(event.detail.selectedStep);
 			inpSelectionChangeCounter.value = ++counter;
+			inpSelectionChangeCause.value = event.detail.changeWithClick;
 		});
 
 		toStep2.addEventListener("click", function () {

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

@@ -50,6 +50,7 @@ describe("Wizard general interaction", () => {
 		const step1InHeader = wiz.shadow$(`[data-ui5-index="1"]`);
 		const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
 		const inpSelectionChangeCounter =  browser.$("#inpSelectionChangeCounter");
+		const inpSelectionChangeCause =  browser.$("#inpSelectionChangeCause");
 
 		// act - click on the first step in the header
 		step1InHeader.click();
@@ -73,6 +74,9 @@ describe("Wizard general interaction", () => {
 		// assert - selection-change fired once
 		assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "1",
 			"Event selection-change fired once.");
+		// assert - selection-change fired due to user click
+		assert.strictEqual(inpSelectionChangeCause.getProperty("value"), "true",
+			"Event selection-change fired due to click.");
 	});
 
 	it("move to next step by SPACE/ENTER", () => {
@@ -136,6 +140,7 @@ describe("Wizard general interaction", () => {
 		const step2 = browser.$("#st2");
 		const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
 		const inpSelectionChangeCounter =  browser.$("#inpSelectionChangeCounter");
+		const inpSelectionChangeCause =  browser.$("#inpSelectionChangeCause");
 
 		// act - scroll the 2nd step into view
 		// Note: scrollIntoView works in Chrome, but if we start executing the test on every browser,
@@ -151,6 +156,10 @@ describe("Wizard general interaction", () => {
 
 		assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "4",
 			"Event selection-change fired 4th time due to scrolling.");
+
+		// assert - selection-change fired not becasue of user click
+		assert.strictEqual(inpSelectionChangeCause.getProperty("value"), "false",
+			"Event selection-change fired not becasue of user click, but scrolling");
 	});
 
 	it("tests dynamically increase step size and move to next step", () => {