From ff836cdada24a30a8716610054dbf1d3ad255b36 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Mon, 29 Mar 2021 14:32:39 +0300
Subject: [PATCH] feat(ui5-wizard): add parameter to selectionChange event

---
 packages/fiori/src/Wizard.js               | 13 +++++++++----
 packages/fiori/test/pages/Wizard_test.html |  5 ++++-
 packages/fiori/test/specs/Wizard.spec.js   |  9 +++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js
index 980b3450da5e..8084f733d4d1 100644
--- a/packages/fiori/src/Wizard.js
+++ b/packages/fiori/src/Wizard.js
@@ -122,12 +122,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 },
 			},
 		},
 	},
@@ -593,7 +595,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();
 	}
@@ -626,7 +628,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;
 		}
 	}
@@ -654,7 +657,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);
 		}
 	}
 
@@ -925,9 +928,10 @@ 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;
@@ -935,6 +939,7 @@ class Wizard extends UI5Element {
 			this.fireEvent("selection-change", {
 				selectedStep: stepToSelect,
 				previouslySelectedStep: selectedStep,
+				changeWithClick,
 			});
 
 			this.selectedStepIndex = stepToSelectIndex;
diff --git a/packages/fiori/test/pages/Wizard_test.html b/packages/fiori/test/pages/Wizard_test.html
index cb95c490a171..79b7a78de042 100644
--- a/packages/fiori/test/pages/Wizard_test.html
+++ b/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("ui5-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 () {
diff --git a/packages/fiori/test/specs/Wizard.spec.js b/packages/fiori/test/specs/Wizard.spec.js
index 9e4a01c3d3e1..cdf23d4ed31a 100644
--- a/packages/fiori/test/specs/Wizard.spec.js
+++ b/packages/fiori/test/specs/Wizard.spec.js
@@ -53,6 +53,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();
@@ -76,6 +77,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", () => {
@@ -139,6 +143,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,
@@ -154,6 +159,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", () => {