fix(ui5-list): fire itemClick after the selection (#1618)

We used to fire the "itemClick" and "itemPress" before the selection finishes and if someone gets the "event.detail.item.selected" - it is will be the old one. 
Now, they are fired after the selection finishes and provide the correct "item" state, although it is not common to listen for  "itemClick" in selection modes, but rather for "selectionChange".

FIXES: #1615

Author: ilhan007

packages/main/src/List.js

@@ -564,9 +564,6 @@ class List extends UI5Element {
 	onItemPress(event) {
 		const pressedItem = event.detail.item;
 
-		this.fireEvent("itemPress", { item: pressedItem });
-		this.fireEvent("itemClick", { item: pressedItem });
-
 		if (!this._selectionRequested && this.mode !== ListMode.Delete) {
 			this._selectionRequested = true;
 			this.onSelectionRequested({
@@ -579,6 +576,9 @@ class List extends UI5Element {
 			});
 		}
 
+		this.fireEvent("itemPress", { item: pressedItem });
+		this.fireEvent("itemClick", { item: pressedItem });
+
 		this._selectionRequested = false;
 	}
 

packages/main/test/pages/List_test_page.html

@@ -28,15 +28,26 @@
 	<input id="loadMoreResult" value="0"/>
 	<br/>
 	<ui5-list id="listEvents" mode="SingleSelectEnd">
-		<ui5-li id="country1" >Argentina</ui5-li>
+		<ui5-li id="country1">Argentina</ui5-li>
 		<ui5-li id="country2" selected >Bulgaria</ui5-li>
-		<ui5-li id="country3" >China</ui5-li>
+		<ui5-li id="country3">China</ui5-li>
 		<ui5-li id="country4" type="Inactive">Portugal</ui5-li>
 	</ui5-list>
 	<ui5-input id="itemPressResultField" placeholder="itemPress result"></ui5-input>
+	<ui5-input id="itemPressSelectedResultField" placeholder="itemPress selected result"></ui5-input>
 	<ui5-input id="selectionChangeResultField" placeholder="selectionChange result"></ui5-input>
 	<ui5-input id="selectionChangeResultPreviousItemsParameter" placeholder="selectionChange previousSelection result"></ui5-input>
 
+	<ui5-list id="listEvents2" mode="MultiSelect">
+		<ui5-li id="country11">Argentina</ui5-li>
+		<ui5-li id="country22" selected >Bulgaria</ui5-li>
+		<ui5-li id="country33">China</ui5-li>
+		<ui5-li id="country44">Portugal</ui5-li>
+	</ui5-list>
+	<ui5-input id="itemPressResultField2" placeholder="itemPress result"></ui5-input>
+	<ui5-input id="itemPressSelectedResultField2" placeholder="itemPress selected result"></ui5-input>
+	<ui5-input id="selectionChangeResultField2" placeholder="selectionChange result"></ui5-input>
+
 	<ui5-list id="list1" header-text="API: GroupHeaderListItem">
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
 		<ui5-li image="./img/HT-1000.jpg" >Laptop HP</ui5-li>
@@ -126,7 +137,9 @@
 
 		var itemDeleteCounter = 0;
 		var itemPressCounter = 0;
+		var itemPressCounter2 = 0;
 		var selectionChangeCounter = 0;
+		var selectionChangeCounter2 = 0;
 
 		function deleteItemHandler(e) {
 			document.querySelector("#lblResult").innerHTML = e.detail.item.innerHTML + ": " + ++itemDeleteCounter;
@@ -137,6 +150,7 @@
 		listEvents.addEventListener("ui5-itemPress", function (event) {
 			itemPressCounter += 1;
 			itemPressResultField.value = itemPressCounter;
+			itemPressSelectedResultField.value = event.detail.item.selected;
 		});
 
 		listEvents.addEventListener("ui5-selectionChange", function (event) {
@@ -148,6 +162,18 @@
 			selectionChangeResultPreviousItemsParameter.value = event.detail.previouslySelectedItems[0].id;
 		})
 
+		listEvents2.addEventListener("ui5-itemPress", function (event) {
+			itemPressCounter2 += 1;
+			itemPressResultField2.value = itemPressCounter2;
+			itemPressSelectedResultField2.value = event.detail.item.selected;
+		});
+
+		listEvents2.addEventListener("ui5-selectionChange", function (event) {
+			selectionChangeCounter2 += 1;
+			selectionChangeResultField2.value = selectionChangeCounter2;
+		});
+
+
 		listMultiSel.addEventListener("ui5-selectionChange", function(event) {
 			fieldMultiSelResult.value = event.detail.selectionComponentPressed;
 		})

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

@@ -12,17 +12,32 @@ describe("List Tests", () => {
 		assert.ok(list, "List is rendered");
 	});
 
-	it("itemPress and selectionChange events are fired", () => {
+	it("itemPress and selectionChange events are fired in Single selection", () => {
 		const itemPressResultField = $("#itemPressResultField");
+		const itemPressSelectedResultField = $("#itemPressSelectedResultField");
 		const selectionChangeResultField = $("#selectionChangeResultField");
 		const firstItem = $("#listEvents #country1");
 
 		firstItem.click();
 
 		assert.strictEqual(itemPressResultField.getProperty("value"), "1", "itemPress event has been fired once");
+		assert.strictEqual(itemPressSelectedResultField.getProperty("value"), "true", "itemPress detail 'item' has correct value.");
 		assert.strictEqual(selectionChangeResultField.getProperty("value"), "1", "selectionChange event has been fired.");
 	});
 
+	it("itemPress and selectionChange events are fired in Multi selection", () => {
+		const itemPressResultField2 = $("#itemPressResultField2");
+		const itemPressSelectedResultField2 = $("#itemPressSelectedResultField2");
+		const selectionChangeResultField2 = $("#selectionChangeResultField2");
+		const firstItem = $("#listEvents2 #country11");
+
+		firstItem.click();
+
+		assert.strictEqual(itemPressResultField2.getProperty("value"), "1", "itemPress event has been fired once");
+		assert.strictEqual(itemPressSelectedResultField2.getProperty("value"), "true", "itemPress detail 'item' has correct value.");
+		assert.strictEqual(selectionChangeResultField2.getProperty("value"), "1", "selectionChange event has been fired.");
+	});
+
 	it("selectionChange events provides previousSelection item", () => {
 		const selectionChangeResultPreviousItemsParameter = $("#selectionChangeResultPreviousItemsParameter");
 		const firstItem = $("#listEvents #country1");