Bug: User menu stays open when not clicking on action items. (#4173)

SAP · Mar 4, 2025 · 1d92677 · 1d92677
1 parent 758e0c4
commit 1d92677
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/core/src/Authorization.svelte b/core/src/Authorization.svelte
@@ -155,6 +155,7 @@
 
   export function logout() {
     AuthLayerSvc.logout();
+    dispatch('toggleDropdownState');
   }
 
   export function handleKeyUp({ keyCode }) {
@@ -200,6 +201,7 @@
       <ul class="fd-list fd-list--compact fd-list--navigation fd-list--navigation-indication fd-list--no-border">
         {#each profileNav.items as profileItem}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
           <li
             tabindex="-1"
             class="fd-list__item fd-list__item--link"
@@ -231,6 +233,7 @@
           </li>
         {/each}
         {#if hasUserSettings}
+          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
           <li
             tabindex="-1"
             class="fd-list__item fd-list__item--link lui-anchor-node"

diff --git a/core/src/navigation/TopNav.svelte b/core/src/navigation/TopNav.svelte
@@ -585,6 +585,7 @@
           {#if profileTypeSettings === 'Fiori3' && GenericHelpers.requestExperimentalFeature('profileMenuFiori3', true)}
             <div class="fd-popover fd-popover--right fd-user-menu">
               <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-no-static-element-interactions -->
               <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
                 {#if userInfo.picture}
                   <button
@@ -616,6 +617,7 @@
                 class="fd-popover__body fd-popover__body--right"
                 aria-hidden={!(dropDownStates.profilePopover || false)}
                 id="profilePopover"
+                on:click|stopPropagation
               >
                 <Authorization
                   on:toggleDropdownState={() => toggleDropdownState('profilePopover')}
@@ -628,6 +630,7 @@
             <div class="fd-user-menu">
               <div class="fd-popover">
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
                   <div class={userInfo.picture ? 'fd-shellbar__button--user-menu' : ''}>
                     <button
@@ -659,6 +662,7 @@
                   class="fd-popover__body fd-popover__body--right"
                   aria-hidden={!(dropDownStates.profilePopover || false)}
                   id="profilePopover"
+                  on:click|stopPropagation
                 >
                   <AuthorizationSimpleProfileMenu
                     on:toggleDropdownState={() => toggleDropdownState('profilePopover')}

diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js
@@ -216,4 +216,77 @@ describe('JS-TEST-APP 4', () => {
       cy.get('.fd-shellbar__logo').should('have.focus');
     });
   });
+
+  describe('User menu popover does not close when mark the user email', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = structuredClone(defaultLuigiConfig);
+      newConfig.settings.responsiveNavigation = 'Fiori3';
+      newConfig.settings.profileType = 'Fiori3';
+      newConfig;
+      newConfig.settings.experimental = {
+        profileMenuFiori3: true
+      };
+      newConfig.navigation.profile = {
+        logout: {
+          label: 'Sign Out',
+          icon: 'sys-cancel'
+        },
+        items: [
+          {
+            label: 'Luigi in Github',
+            link: '/simple'
+          }
+        ],
+        staticUserInfoFn: () => {
+          return new Promise((resolve) => {
+            resolve({
+              name: 'Static User',
+              initials: 'LU',
+              email: 'other.luigi.user@example.com',
+              description: 'Luigi Developer'
+            });
+          });
+        }
+      };
+      newConfig.tag = 'usermenustayopen';
+    });
+    it('User menu popover does not close when mark the user email in classic theme', () => {
+      cy.visitTestApp('/home', newConfig);
+      cy.get('#app[configversion="usermenustayopen"]');
+      cy.get('#profilePopover').should('not.be.visible');
+      cy.get('[data-testid="luigi-topnav-profile"]').click();
+      cy.get('#profilePopover').should('be.visible');
+      cy.get('[data-testid="luigi-topnav-profile-description"]').click();
+      cy.wait(500);
+      cy.get('#profilePopover').should('be.visible');
+      cy.get('.iframeContainer').click();
+      cy.get('#profilePopover').should('not.be.visible');
+    });
+    it('User menu popover does not close when mark the user email in sap horizon theme', () => {
+      newConfig.settings.btpToolLayout = true;
+      newConfig.settings.experimental = {
+        btpToolLayout: true,
+        profileMenuFiori3: true
+      };
+      newConfig.settings.profileType = 'Fiori3';
+      cy.visitTestApp('/home', newConfig);
+      cy.document().then((doc) => {
+        const link = doc.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/node_modules/@luigi-project/core/luigi_horizon.css';
+        doc.head.appendChild(link);
+      });
+      cy.wait(500);
+      cy.get('#app[configversion="usermenustayopen"]');
+      cy.get('#profilePopover').should('not.be.visible');
+      cy.get('[data-testid="luigi-topnav-profile"]').click();
+      cy.get('#profilePopover').should('be.visible');
+      cy.get('[data-testid="luigi-topnav-profile-description"]').click();
+      cy.wait(500);
+      cy.get('#profilePopover').should('be.visible');
+      cy.get('.iframeContainer').click();
+      cy.get('#profilePopover').should('not.be.visible');
+    });
+  });
 });