fix(ui5-avatar): fix click event fired twice (#2967)

We used to fire a custom event, but did not stop the native one and end up firing two "click" events.
Now, the native one is stopped properly (we need to fire the custom one, so the noConflict ui5-click is also fired).
FIXES: #2943

Author: dobrinyonkov

packages/main/src/Avatar.js

@@ -324,18 +324,25 @@ class Avatar extends UI5Element {
 	}
 
 	_onclick(event) {
-		event.isMarked = "avatar";
 		if (this.interactive) {
-			event.preventDefault();
-			// Prevent the native event and fire custom event because otherwise the noConfict event won't be thrown
+			// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+			event.stopPropagation();
 			this.fireEvent("click");
 		}
 	}
 
 	_onkeydown(event) {
-		if (this.interactive && isEnter(event)) {
+		if (!this.interactive) {
+			return;
+		}
+
+		if (isEnter(event)) {
 			this.fireEvent("click");
 		}
+
+		if (isSpace(event)) {
+			event.preventDefault(); // prevent scrolling
+		}
 	}
 
 	_onkeyup(event) {

packages/main/src/AvatarGroup.hbs

@@ -5,7 +5,7 @@
 		@keydown="{{_onkeydown}}" 
 		@focusin="{{_onfocusin}}" 
 		tabindex="{{_groupTabIndex}}"
-		@click="{{_onGroupClick}}"
+		@click="{{_onClick}}"
 		@ui5-click="{{_onUI5Click}}"
 	>
 		<slot></slot>

packages/main/src/AvatarGroup.js

@@ -340,15 +340,24 @@ class AvatarGroup extends UI5Element {
 		});
 	}
 
-	_onGroupClick(event) {
+	_onClick(event) {
+		// no matter the value of noConflict, the ui5-button and the group container (div) always fire a native click event
+		const isButton = event.target.hasAttribute("ui5-button");
 		event.stopPropagation();
-		if (event.isMarked === "avatar" || event.isMarked === "button" || this._isGroup) {
+
+		if (this._isGroup || isButton) {
 			this._fireGroupEvent(event.target);
 		}
 	}
 
 	_onUI5Click(event) {
+		// when noConflict=true only ui5-avatar will fire ui5-click event
+		const isAvatar = event.target.hasAttribute("ui5-avatar");
 		event.stopPropagation();
+
+		if (isAvatar) {
+			this._fireGroupEvent(event.target);
+		}
 	}
 
 	/**

packages/main/test/pages/Avatar.html

@@ -117,13 +117,20 @@ <h3>Avatar - interactive</h3>
 		<ui5-avatar id="interactive-avatar" interactive initials="XS" size="XS"></ui5-avatar>
 		<ui5-avatar id="non-interactive-avatar" initials="S" size="S"></ui5-avatar>
 		<ui5-input id="click-event" value="0"></ui5-input>
+
+		<br>
+		<ui5-avatar id="myInteractiveAvatar" interactive initials="L" size="L"></ui5-avatar>
+		<ui5-input id="click-event-2"></ui5-input>
 	</section>
 
 	<script>
 		var avatar = document.getElementById("interactive-avatar"),
+			myInteractiveAvatar = document.getElementById("myInteractiveAvatar"),
 			nonInteractiveAvatar = document.getElementById("non-interactive-avatar"),
 			input = document.getElementById("click-event"),
+			input2 = document.getElementById("click-event-2"),
 			inputValue = 0;
+			inputValue2 = 0;
 
 		avatar.addEventListener("ui5-click", function() {
 			input.value = ++inputValue;
@@ -132,6 +139,10 @@ <h3>Avatar - interactive</h3>
 		nonInteractiveAvatar.addEventListener("ui5-click", function() {
 			input.value = ++inputValue;
 		});
+
+		myInteractiveAvatar.addEventListener("click", function() {
+			input2.value = ++inputValue2;
+		});
 	</script>
 
 </body>

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

@@ -46,7 +46,7 @@ describe("Avatar", () => {
 		assert.ok(initials.isExisting(), "initials are rendered");
 	});
 
-	it("Tests if clicked event is thrown for interactive avatars", () => {
+	it("Tests noConflict 'ui5-click' event is thrown for interactive avatars", () => {
 		const avatarRoot = browser.$("#interactive-avatar").shadow$(".ui5-avatar-root");
 		const input = browser.$("#click-event");
 
@@ -60,7 +60,7 @@ describe("Avatar", () => {
 		assert.strictEqual(input.getAttribute("value"), "3", "Space throws event");
 	  });
 
-	  it("Tests if clicked event is not thrown for non interactive avatars", () => {
+	  it("Tests noConflict 'ui5-click' event is not thrown for non interactive avatars", () => {
 		const avatarRoot = browser.$("#non-interactive-avatar").shadow$(".ui5-avatar-root");;
 		const input = browser.$("#click-event");
 
@@ -72,5 +72,17 @@ describe("Avatar", () => {
 
 		avatarRoot.keys("Space");
 		assert.strictEqual(input.getAttribute("value"), "3", "Space throws event");
+	});
+
+	it("Tests native 'click' event thrown", () => {
+		browser.execute(function() {
+			window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(false);
 		});
+		
+		const avatar = browser.$("#myInteractiveAvatar");
+		const input = browser.$("#click-event-2");
+
+		avatar.click();
+		assert.strictEqual(input.getAttribute("value"), "1", "Mouse click throws event");
+	});
 });