fix(ui5-shellbar): fire "click" by the correct abstract ui5-shellbar-item (#4303)

- Fix an issue with the following code, although no longer throws an error as before the recently introduced [fix](https://github.com/SAP/ui5-webcomponents/pull/4287/files) is not complete:

```js
const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
const shellbarItem = this.items.find(item => {
	return this.shadowRoot.querySelector(`#${refItemId}`);
});
```

As this is always true (the clicked item is among all items):
```js
	return this.shadowRoot.querySelector(`#${refItemId}`);
```
the result will be always the same - the first ui5-shellbar-item in the array will be returned and the"click" event will be always fired by the first ui5-shellbar-item, although we might click on another custom icon within the bar - the 2nd, 3rd, etc.

- Add a test to avoid degradations

Author: ilhan007

packages/fiori/src/ShellBar.js

@@ -726,7 +726,7 @@ class ShellBar extends UI5Element {
 
 		if (refItemId) {
 			const shellbarItem = this.items.find(item => {
-				return this.shadowRoot.querySelector(`#${refItemId}`);
+				return item._id === refItemId;
 			});
 
 			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);

packages/fiori/test/pages/ShellBar.html

@@ -55,8 +55,8 @@
 			id="shellbarwithitems"
 	>
 		<ui5-shellbar-item icon="accelerated" text="Hello World!" title="Schedule"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="accept" text="Hello World!" title="Approve"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="alert" text="Hello World!" title="Warning"></ui5-shellbar-item>
+		<ui5-shellbar-item id="accept" icon="accept" text="Hello World!" title="Approve"></ui5-shellbar-item>
+		<ui5-shellbar-item id="warning" icon="alert" text="Hello World!" title="Warning"></ui5-shellbar-item>
 		<ui5-shellbar-item icon="discussion" text="Hello World!" count="42" title="42 Messages"></ui5-shellbar-item>
 		<ui5-shellbar-item icon="error" text="Hello World!" title="Attention"></ui5-shellbar-item>
 		<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents" title="hello world"></ui5-shellbar-item>
@@ -65,6 +65,8 @@
 		<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents" title="Sound"></ui5-shellbar-item>
 	</ui5-shellbar>
 
+	<ui5-input id="press-input3" class="shellbar3auto"></ui5-input>
+
 	<ui5-shellbar
 			class="shellbar-example"
 			secondary-title="No primary title"
@@ -284,6 +286,14 @@ <h3>ShellBar in Compact</h3>
 				window["custom-item-popover"].showAt(event.detail.targetRef);
 			});
 		});
+
+		["accept", "warning"].forEach(function(id) {
+			var currenItem = window[id][0] || window[id];
+			currenItem.addEventListener("ui5-click", function(event) {
+				event.preventDefault();
+				window["press-input3"].value = event.target.id;
+			});
+		});
 	</script>
 </body>
 </html>

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

@@ -60,7 +60,22 @@ describe("Component Behavior", () => {
 
 			assert.strictEqual(await shellbar.shadow$(".ui5-shellbar-custom-item").getAttribute("data-count"), "3");
 
-		})
+		});
+
+		it("tests 'click' on custom action", async () => {
+			const shellbar = await browser.$("#shellbarwithitems");
+			const resultInput = await browser.$("#press-input3");
+			const customActionIcon1 = await shellbar.shadow$(`.ui5-shellbar-custom-item[icon="accept"]`);
+			const customActionIcon2 = await shellbar.shadow$(`.ui5-shellbar-custom-item[icon="alert"]`);
+
+			await customActionIcon1.click();
+			assert.strictEqual(await resultInput.getProperty("value"), "accept",
+				"click, fired by the first item");
+
+			await customActionIcon2.click();
+			assert.strictEqual(await resultInput.getProperty("value"), "warning",
+				"click, fired by the second item");
+		});
 	});
 
 	describe("Responsiveness", () => {