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 @@

AvatarGroup with user defined overflow button

individualPop.openBy(avatarRef); } + avatarGroupGroupEvents.addEventListener("ui5-click", function (event) { + eventAvatarsClicked.value= ++eventAvatarsClickedValue; + }); + + avatarGroupIndividualEvents.addEventListener("ui5-click", function (event) { + eventAvatarsClicked.value= ++eventAvatarsClickedValue; + }); avatarGroupIndividual.addEventListener("click", function (event) { eventTargetRef.value = event.detail.targetRef.tagName; @@ -316,6 +354,7 @@

AvatarGroup with user defined overflow button

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"); + + + }); });