From e463b7b81984ab1d5e95ec32b86bcc0c5a02264a Mon Sep 17 00:00:00 2001
From: Humberto Morera <31667212+hmoreras@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:30:10 -0600
Subject: [PATCH] implementantion(fix): #29534 Login-as popup show's in the
 incorrect position.  (#29631)

### Proposed Changes
* Hide mask when menu close.


### Before


https://github.com/user-attachments/assets/f35abb40-9250-4bf4-8e22-898814bb3e58


### After


https://github.com/user-attachments/assets/d172eb71-8eb7-4997-b1ef-976ead617b36
---
 .../dot-toolbar-user.component.html           | 31 +++++++++----------
 .../dot-toolbar-user.component.spec.ts        | 13 ++++++++
 .../dot-toolbar-user.component.ts             | 29 +++++++++--------
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
index 2dccb506e84d..b24f439fa98d 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
@@ -1,11 +1,9 @@
-<ng-container *ngIf="vm$ | async as vm">
-    <div
-        *ngIf="showMask()"
-        (click)="toogleMenu($event)"
-        class="dot-mask"
-        data-testId="dot-mask"></div>
+@if (vm$ | async; as vm) {
+    @if ($showMask()) {
+        <div (click)="toggleMenu($event)" class="dot-mask" data-testId="dot-mask"></div>
+    }
     <p-avatar
-        (click)="toogleMenu($event)"
+        (click)="toggleMenu($event)"
         [email]="vm.userData.email"
         data-testId="avatar"
         dotGravatar></p-avatar>
@@ -13,16 +11,17 @@
         [model]="vm.items"
         [popup]="true"
         #menu
+        (onHide)="hideMask()"
         appendTo="body"
         styleClass="toolbar-user__menu"></p-menu>
 
-    <dot-my-account
-        *ngIf="vm.showMyAccount"
-        (shutdown)="store.showMyAccount(false)"
-        [visible]="vm.showMyAccount"></dot-my-account>
+    @if (vm.showMyAccount) {
+        <dot-my-account
+            (shutdown)="store.showMyAccount(false)"
+            [visible]="vm.showMyAccount"></dot-my-account>
+    }
 
-    <dot-login-as
-        *ngIf="vm.showLoginAs"
-        (cancel)="store.showLoginAs(false)"
-        [visible]="vm.showLoginAs"></dot-login-as>
-</ng-container>
+    @if (vm.showLoginAs) {
+        <dot-login-as (cancel)="store.showLoginAs(false)" [visible]="vm.showLoginAs"></dot-login-as>
+    }
+}
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
index 6cff7ad5b8eb..8a4b430b1e81 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
@@ -221,4 +221,17 @@ describe('DotToolbarUserComponent', () => {
         fixture.detectChanges();
         expect(de.query(By.css('[data-testid="dot-mask"]'))).toBeFalsy();
     });
+
+    it('should hide mask when menu hide', () => {
+        fixture.detectChanges();
+        const avatarComponent = de.query(By.css('[data-testid="avatar"]')).nativeElement;
+        avatarComponent.click();
+
+        const menu = de.query(By.css('p-menu'));
+        menu.triggerEventHandler('onHide', {});
+
+        fixture.detectChanges();
+
+        expect(de.query(By.css('[data-testId="dot-mask"]'))).toBeNull();
+    });
 });
diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
index aa120f3e0c6c..80ea2238cfc2 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
@@ -1,11 +1,11 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
     OnInit,
-    ViewChild,
     inject,
-    signal
+    signal,
+    viewChild
 } from '@angular/core';
 
 import { AvatarModule } from 'primeng/avatar';
@@ -33,23 +33,26 @@ import { DotMyAccountModule } from '../dot-my-account/dot-my-account.module';
         DotMyAccountModule,
         DotSafeHtmlPipe,
         MenuModule,
-        AsyncPipe,
-        NgIf
+        AsyncPipe
     ]
 })
 export class DotToolbarUserComponent implements OnInit {
-    readonly #store = inject(DotToolbarUserStore);
+    readonly store = inject(DotToolbarUserStore);
 
-    vm$ = this.#store.vm$;
-    @ViewChild('menu') menu: Menu;
-    showMask = signal<boolean>(false);
+    vm$ = this.store.vm$;
+    $menu = viewChild<Menu>('menu');
+    $showMask = signal<boolean>(false);
 
     ngOnInit(): void {
-        this.#store.init();
+        this.store.init();
     }
 
-    toogleMenu(event: CustomEvent): void {
-        this.menu.toggle(event);
-        this.showMask.update((value) => !value);
+    toggleMenu(event: Event): void {
+        this.$menu().toggle(event);
+        this.$showMask.update((value) => !value);
+    }
+
+    hideMask(): void {
+        this.$showMask.update(() => false);
     }
 }