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,38 +14,41 @@
             <ion-icon name="ellipsis-vertical" />
           </button>
           <mat-menu #actionsMenu="matMenu" class="wide-menu" xPosition="before">
-            <button
+            <div (click)="$event.stopPropagation()">
-              mat-menu-item
+              <button
-              [disabled]="!hasPermissionToReadAiPrompt"
+                mat-menu-item
-              (click)="onCopyPromptToClipboard('portfolio')"
+                [disabled]="!hasPermissionToReadAiPrompt"
-            >
+                (click)="onCopyPromptToClipboard('portfolio')"
-              <span class="align-items-center d-flex">
+              >
-                @if (user?.subscription?.type === 'Basic') {
+                <span class="align-items-center d-flex">
-                  <gf-premium-indicator class="mr-2" />
+                  @if (user?.subscription?.type === 'Basic') {
-                } @else {
+                    <gf-premium-indicator class="mr-2" />
-                  <ion-icon class="mr-2" name="copy-outline" />
+                  } @else {
-                }
+                    <ion-icon class="mr-2" name="copy-outline" />
-                <ng-container i18n
+                  }
-                  >Copy portfolio data to clipboard for AI prompt</ng-container
+                  <ng-container i18n
-                >
+                    >Copy portfolio data to clipboard for AI
-              </span>
+                    prompt</ng-container
-            </button>
+                  >
-            <button
+                </span>
-              mat-menu-item
+              </button>
-              [disabled]="!hasPermissionToReadAiPrompt"
+              <button
-              (click)="onCopyPromptToClipboard('analysis')"
+                mat-menu-item
-            >
+                [disabled]="!hasPermissionToReadAiPrompt"
-              <span class="align-items-center d-flex">
+                (click)="onCopyPromptToClipboard('analysis')"
-                @if (user?.subscription?.type === 'Basic') {
+              >
-                  <gf-premium-indicator class="mr-2" />
+                <span class="align-items-center d-flex">
-                } @else {
+                  @if (user?.subscription?.type === 'Basic') {
-                  <ion-icon class="mr-2" name="copy-outline" />
+                    <gf-premium-indicator class="mr-2" />
-                }
+                  } @else {
-                <ng-container i18n
+                    <ion-icon class="mr-2" name="copy-outline" />
-                  >Copy AI prompt to clipboard for analysis</ng-container
+                  }
-                >
+                  <ng-container i18n
-              </span>
+                    >Copy AI prompt to clipboard for analysis</ng-container
-            </button>
+                  >
+                </span>
+              </button>
+            </div>
           </mat-menu>
         </div>
       </div>