diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
index d539927a5f33..2521370a5704 100644
--- a/packages/fiori/cypress/specs/UserMenu.cy.ts
+++ b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -342,6 +342,47 @@ describe("Events", () => {
cy.get("@clicked").should("have.been.calledOnce");
});
+
+ it("tests open event", () => {
+ cy.mount(html`
+
+
+ `);
+ cy.get("[ui5-user-menu]").as("userMenu");
+ cy.get("@userMenu")
+ .then($userMenu => {
+ $userMenu.get(0).addEventListener("open", cy.stub().as("opened"));
+ });
+
+ cy.get("@userMenu")
+ .ui5UserMenuOpen();
+
+ cy.get("@opened").should("have.been.calledOnce");
+ });
+
+ it("tests close event", () => {
+ cy.mount(html`
+
+ `);
+ cy.get("[ui5-user-menu]").as("userMenu");
+ cy.get("@userMenu").should("exist");
+
+ cy.get("@userMenu")
+ .then($userMenu => {
+ $userMenu.get(0).addEventListener("close", cy.stub().as("closed"));
+ });
+
+ cy.get("@userMenu")
+ .ui5UserMenuOpen();
+
+ cy.get("@userMenu")
+ .ui5UserMenuOpened();
+ cy.get("@userMenu").shadow().find("[ui5-button]").as("signOutBtn");
+ cy.get("@signOutBtn")
+ .click();
+
+ cy.get("@closed").should("have.been.calledOnce");
+ });
});
describe("Responsiveness", () => {
diff --git a/packages/fiori/cypress/support/commands.ts b/packages/fiori/cypress/support/commands.ts
index 7b99c3511d54..233a8a679479 100644
--- a/packages/fiori/cypress/support/commands.ts
+++ b/packages/fiori/cypress/support/commands.ts
@@ -37,3 +37,13 @@
// }
import "../../../main/cypress/support/commands.js";
+import "./commands/UserMenu.commands.js";
+
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ ui5UserMenuOpen(options?: { opener?: string }): Chainable
+ ui5UserMenuOpened(): Chainable
+ }
+ }
+}
diff --git a/packages/fiori/cypress/support/commands/UserMenu.commands.ts b/packages/fiori/cypress/support/commands/UserMenu.commands.ts
new file mode 100644
index 000000000000..e8b000fe9152
--- /dev/null
+++ b/packages/fiori/cypress/support/commands/UserMenu.commands.ts
@@ -0,0 +1,29 @@
+Cypress.Commands.add("ui5UserMenuOpen", { prevSubject: true }, (prevSubject, options) => {
+ cy.wrap(prevSubject)
+ .as("userMenu")
+ .then($userMenu => {
+ if (options?.opener) {
+ cy.wrap($userMenu)
+ .invoke("attr", "opener", options.opener);
+ }
+
+ cy.wrap($userMenu)
+ .invoke("attr", "open", true);
+ });
+
+ cy.get("@userMenu")
+ .ui5UserMenuOpened();
+});
+
+Cypress.Commands.add("ui5UserMenuOpened", { prevSubject: true }, subject => {
+ cy.wrap(subject)
+ .as("userMenu");
+
+ cy.get("@userMenu")
+ .should("have.attr", "open");
+
+ cy.get("@userMenu")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+});
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
index baed3bf73cfc..5a076bd6ba38 100644
--- a/packages/fiori/src/UserMenu.ts
+++ b/packages/fiori/src/UserMenu.ts
@@ -126,9 +126,24 @@ type UserMenuOtherAccountClickEventDetail = {
cancelable: true,
})
+/**
+ * Fired when a user menu is open.
+ * @public
+ * @since 2.6.0
+ */
+@event("open")
+
+/**
+ * Fired when a user menu is close.
+ * @public
+ * @since 2.6.0
+ */
+@event("close")
+
/**
* Fired when the "Sign Out" button is selected.
* @public
+ * @since 2.6.0
*/
@event("sign-out-click", {
cancelable: true,
@@ -141,6 +156,9 @@ class UserMenu extends UI5Element {
"change-account": UserMenuOtherAccountClickEventDetail;
"item-click": UserMenuItemClickEventDetail;
"sign-out-click": void;
+ "open": void;
+ "close": void;
+
}
/**
* Defines if the User Menu is opened.
@@ -364,8 +382,13 @@ class UserMenu extends UI5Element {
this._closeUserMenu();
}
+ _handlePopoverAfterOpen() {
+ this.fireDecoratorEvent("open");
+ }
+
_handlePopoverAfterClose() {
this.open = false;
+ this.fireDecoratorEvent("close");
}
_handleDeclineClick() {
diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
index 4016736a6658..895a0aedec19 100644
--- a/packages/fiori/src/UserMenuTemplate.tsx
+++ b/packages/fiori/src/UserMenuTemplate.tsx
@@ -32,6 +32,7 @@ export default function UserMenuTemplate(this: UserMenu) {
open={this.open}
opener={this.opener}
onClose={this._handlePopoverAfterClose}
+ onOpen={this._handlePopoverAfterOpen}
>
{this._isPhone ?
<>
diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html
index 4e83323c9ef0..09b306036578 100644
--- a/packages/fiori/test/pages/UserMenu.html
+++ b/packages/fiori/test/pages/UserMenu.html
@@ -88,8 +88,6 @@
const shellbar = document.getElementById("shellbar");
const menuShellBar = document.getElementById("userMenuShellBar");
-
-
shellbar.addEventListener("ui5-profile-click", (event) => {
menuShellBar.opener = event.detail.targetRef;
if(menuShellBar.open){
@@ -135,8 +133,12 @@
console.log("Add account clicked");
});
- menu.addEventListener("change-account", function (event) {
- console.log("Change account account", event.detail);
+ menu.addEventListener("open", function (event) {
+ console.log("Change user menu open");
+ });
+
+ menu.addEventListener("close", function (event) {
+ console.log("Change user menu close");
});
menu.addEventListener("sign-out-click", function (event) {
@@ -194,10 +196,18 @@
const result = prompt("Sign Out", "Are you sure you want to sign out?");
if (result) {
- menu2.open = false;
+ menuShellBar.open = false;
}
event.preventDefault();
});
+
+ menuShellBar.addEventListener("open", function (event) {
+ console.log("Change user menu open");
+ });
+
+ menuShellBar.addEventListener("close", function (event) {
+ console.log("Change user menu close");
+ });