diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js
index 501d5bb4ec7f..858de9fcfe79 100644
--- a/packages/main/src/AvatarGroup.js
+++ b/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();
}
}
diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html
index 06b4c892c87d..920e5af0f605 100644
--- a/packages/main/test/pages/AvatarGroup.html
+++ b/packages/main/test/pages/AvatarGroup.html
@@ -144,6 +144,27 @@
Business card
+
Test Fired Events
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
TargetRef Tag Name:
@@ -156,7 +177,13 @@
Business card
-
+
+ Avatars clicked count:
+
+
+
+
+
@@ -237,7 +264,11 @@
AvatarGroup with user defined overflow button
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 @@
eventName.value = "";
eventTargetRef.value = "";
eventOverflowButtonClicked.value = "";
+ eventAvatarsClicked.value = "";
});
function formatBtnText(group) {
diff --git a/packages/main/test/specs/AvatarGroup.spec.js b/packages/main/test/specs/AvatarGroup.spec.js
index e358683e61e0..0d09b2bef39d 100644
--- a/packages/main/test/specs/AvatarGroup.spec.js
+++ b/packages/main/test/specs/AvatarGroup.spec.js
@@ -107,4 +107,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");
+
+
+ });
});