fix(ui5-avatar-group): click event is fired only once (#3196)

Author: dobrinyonkov

packages/main/src/AvatarGroup.js

@@ -341,20 +341,23 @@ class AvatarGroup extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
-			this._fireGroupEvent(event.target);
-		}
-
-		if (isSpace(event)) {
-			// prevent scrolling
-			event.preventDefault();
+		// when type is "Individual" the ui5-avatar and ui5-button both
+		// fire "click" event when SPACE or ENTER are pressed and
+		// AvatarGroup "click" is fired in their handlers (_onClick, _onUI5Click).
+		if (this._isGroup) {
+			if (isEnter(event)) {
+				this._fireGroupEvent(event.target);
+			} else if (isSpace(event)) {
+				// prevent scrolling
+				event.preventDefault();
+			}
 		}
 	}
 
 	_onkeyup(event) {
-		if (!event.shiftKey && isSpace(event)) {
-			event.preventDefault();
+		if (!event.shiftKey && isSpace(event) && this._isGroup) {
 			this._fireGroupEvent(event.target);
+			event.preventDefault();
 		}
 	}
 

packages/main/test/pages/AvatarGroup.html

@@ -144,6 +144,27 @@ <h5>Business card</h5>
 		</ui5-avatar-group>
 		<br>
 
+		<h3>Test Fired Events</h3>
+		<br>
+		<div style="width: 400px;">
+			<ui5-avatar-group type="Individual" avatar-size="XL" id="avatar-group-individual-events">
+				<ui5-avatar interactive icon="home" initials="XL" id="avatar-1-test-events"></ui5-avatar>
+				<ui5-avatar interactive initials="XL"></ui5-avatar>
+				<ui5-avatar interactive icon="home"></ui5-avatar>
+				<ui5-avatar interactive initials="XL"></ui5-avatar>
+			</ui5-avatar-group>
+		</div>
+		<br>
+		<div style="width: 400px;">
+			<ui5-avatar-group type="Group" avatar-size="XL" id="avatar-group-group-events">
+				<ui5-avatar interactive icon="home" initials="XL"></ui5-avatar>
+				<ui5-avatar interactive initials="XL"></ui5-avatar>
+				<ui5-avatar interactive icon="home"></ui5-avatar>
+				<ui5-avatar interactive initials="XL"></ui5-avatar>
+			</ui5-avatar-group>
+		</div>
+		<br>
+
 		<div class="demo-section">
 			<span>TargetRef Tag Name: </span>
 			<input type="text" id="event-target" />
@@ -157,6 +178,12 @@ <h5>Business card</h5>
 			<br>
 			<br>
 
+			<span>Avatars clicked count: </span>
+			<input type="text" id="event-avatars-clicked" value="0" />
+
+			<br>
+			<br>
+
 			<button id="reset-btn">Reset fields</button>
 		</div>
 		<br>
@@ -237,7 +264,11 @@ <h3>AvatarGroup with user defined overflow button</h3>
 	var eventName = document.getElementById("event-name");
 	var eventTargetRef = document.getElementById("event-target");
 	var eventOverflowButtonClicked = document.getElementById("event-overflow-button-clicked");
+	var eventAvatarsClicked = document.getElementById("event-avatars-clicked");
+	var eventAvatarsClickedValue = eventAvatarsClicked.value;
 	var avatarGroupIndividual = document.getElementById("avatar-group-individual");
+	var avatarGroupIndividualEvents = document.getElementById("avatar-group-individual-events");
+	var avatarGroupGroupEvents = document.getElementById("avatar-group-group-events");
 	var avatarGroupGroup = document.getElementById("avatar-group-group");
 	var groupPop = document.getElementById("group-pop")
 	var individualPop = document.getElementById("individual-pop")
@@ -289,6 +320,13 @@ <h3>AvatarGroup with user defined overflow button</h3>
 		individualPop.openBy(avatarRef);
 	}
 
+	avatarGroupGroupEvents.addEventListener("ui5-click", function (event) {
+		eventAvatarsClicked.value= ++eventAvatarsClickedValue;
+	});
+
+	avatarGroupIndividualEvents.addEventListener("ui5-click", function (event) {
+		eventAvatarsClicked.value= ++eventAvatarsClickedValue;
+	});
 
 	avatarGroupIndividual.addEventListener("ui5-click", function (event) {
 		eventTargetRef.value = event.detail.targetRef.tagName;
@@ -316,6 +354,7 @@ <h3>AvatarGroup with user defined overflow button</h3>
 		eventName.value = "";
 		eventTargetRef.value = "";
 		eventOverflowButtonClicked.value = "";
+		eventAvatarsClicked.value = "";
 	});
 
 	function formatBtnText(group) {

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

@@ -110,4 +110,37 @@ describe("avatar-group rendering", () => {
 		assert.strictEqual(`+${hiddenItemsCount}`, overflowButtonText, "Overflow button shows the hidden items count correctly");
 	});
 
+	it("tests if click event is firing only once", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/AvatarGroup.html`);
+		let eventCounter = 0;
+
+		const avatar = browser.$("#avatar-1-test-events");
+		const overflowButton = browser.$("#avatar-group-individual-events").shadow$("ui5-button");
+		const avatarGroupTypeGroup = browser.$("#avatar-group-group-events");
+		const eventAvatarsClicked = browser.$("#event-avatars-clicked");
+		const getEventsCount = () => parseInt(eventAvatarsClicked.getValue())
+
+		avatar.click() // set focus (important for the keys interaction to take action)
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per mouse click interaction - Avatar");
+		avatar.keys('Enter');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Enter' interaction - Avatar");
+		avatar.keys('Space');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Space' interaction - Avatar");
+
+		overflowButton.click() // set focus (important for the keys interaction to take action)
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per mouse click interaction - Overflow Button");
+		overflowButton.keys('Enter');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Enter' interaction - Overflow Button");
+		overflowButton.keys('Space');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Space' interaction - Overflow Button");
+
+		avatarGroupTypeGroup.click() // set focus (important for the keys interaction to take action)
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per mouse click interaction - Avatar Group type Group");
+		avatarGroupTypeGroup.keys('Enter');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Enter' interaction - Avatar Group type Group");
+		avatarGroupTypeGroup.keys('Space');
+		assert.strictEqual(getEventsCount(), ++eventCounter, "Avatar group 'click' event only fires once per keyboard 'Space' interaction - Avatar Group type Group");
+
+
+	});
 });