feat: prevent menu from closing until loading completes

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -16,7 +16,14 @@ import type { AiPromptMode, GroupBy } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { Clipboard } from '@angular/cdk/clipboard';
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SymbolProfile } from '@prisma/client';
 import { isNumber, sortBy } from 'lodash';
@@ -32,6 +39,7 @@ import { takeUntil } from 'rxjs/operators';
   standalone: false
 })
 export class AnalysisPageComponent implements OnDestroy, OnInit {
+  @ViewChild(MatMenuTrigger) actionsMenuButton!: MatMenuTrigger;
   public benchmark: Partial<SymbolProfile>;
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
@@ -163,6 +171,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
           .subscribe(() => {
             window.open('https://duck.ai', '_blank');
           });
+
+        this.actionsMenuButton.closeMenu();
       });
   }
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -5,6 +5,7 @@
       <div class="col-lg">
         <div class="d-flex justify-content-end">
           <button
+            #actionsMenuButton
             class="mx-1 no-min-width px-2"
             mat-stroked-button
             [matMenuTriggerFor]="actionsMenu"
@@ -13,6 +14,7 @@
             <ion-icon name="ellipsis-vertical" />
           </button>
           <mat-menu #actionsMenu="matMenu" class="wide-menu" xPosition="before">
+            <div (click)="$event.stopPropagation()">
               <button
                 mat-menu-item
                 [disabled]="!hasPermissionToReadAiPrompt"
@@ -25,7 +27,8 @@
                     <ion-icon class="mr-2" name="copy-outline" />
                   }
                   <ng-container i18n
-                  >Copy portfolio data to clipboard for AI prompt</ng-container
+                    >Copy portfolio data to clipboard for AI
+                    prompt</ng-container
                   >
                 </span>
               </button>
@@ -45,6 +48,7 @@
                   >
                 </span>
               </button>
+            </div>
           </mat-menu>
         </div>
       </div>