From 759bbf5a88270d318f5b19ae452ba27baa9a3797 Mon Sep 17 00:00:00 2001
From: Roman Nastyuk <rnastyuk@exoft.net>
Date: Wed, 1 Oct 2025 18:41:09 +0300
Subject: [PATCH] fix(ang-872): fixed double click component actions issue

---
 .../view-duplicates.component.html            | 27 +++++++++------
 .../view-duplicates.component.ts              | 23 +++++++++++--
 .../overview-components.component.html        | 34 +++++++++----------
 3 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/app/features/analytics/components/view-duplicates/view-duplicates.component.html b/src/app/features/analytics/components/view-duplicates/view-duplicates.component.html
index 94cc98f53..e1e10194b 100644
--- a/src/app/features/analytics/components/view-duplicates/view-duplicates.component.html
+++ b/src/app/features/analytics/components/view-duplicates/view-duplicates.component.html
@@ -20,25 +20,32 @@ <h2 class="flex align-items-center gap-2">
               {{ duplicate.title }}
             </h2>
 
-            <div>
-              @if (showMoreOptions(duplicate)) {
+            @if (showMoreOptions(duplicate)) {
+              <div>
                 <p-button
                   severity="contrast"
                   icon="fas fa-ellipsis-vertical"
                   raised
                   variant="outlined"
                   [ariaLabel]="'common.buttons.more' | translate"
-                  (onClick)="componentActionMenu.toggle($event)"
+                  (onClick)="menu.toggle($event)"
                 >
                 </p-button>
-              }
 
-              <p-menu appendTo="body" #componentActionMenu [model]="forkActionItems(duplicate.id)" popup>
-                <ng-template #item let-item>
-                  <a class="p-menu-item-link">{{ item.label | translate }}</a>
-                </ng-template>
-              </p-menu>
-            </div>
+                <p-menu appendTo="body" [model]="forkActionItems(duplicate.id)" popup #menu>
+                  <ng-template #item let-item>
+                    <a
+                      class="p-menu-item-link"
+                      (mousedown)="handleMenuAction(item.action, item.resourceId)"
+                      (keydown.enter)="handleMenuAction(item.action, item.resourceId)"
+                      tabindex="0"
+                    >
+                      {{ item.label | translate }}
+                    </a>
+                  </ng-template>
+                </p-menu>
+              </div>
+            }
           </div>
 
           <div class="flex flex-column gap-2">
diff --git a/src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts b/src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts
index e9479339e..5bfb99af3 100644
--- a/src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts
+++ b/src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts
@@ -89,15 +89,18 @@ export class ViewDuplicatesComponent {
   readonly forkActionItems = (resourceId: string) => [
     {
       label: 'project.overview.actions.manageContributors',
-      command: () => this.router.navigate([resourceId, 'contributors']),
+      action: 'manageContributors',
+      resourceId,
     },
     {
       label: 'project.overview.actions.settings',
-      command: () => this.router.navigate([resourceId, 'settings']),
+      action: 'settings',
+      resourceId,
     },
     {
       label: 'project.overview.actions.delete',
-      command: () => this.handleDeleteFork(resourceId),
+      action: 'delete',
+      resourceId,
     },
   ];
 
@@ -175,6 +178,20 @@ export class ViewDuplicatesComponent {
     );
   }
 
+  handleMenuAction(action: string, resourceId: string): void {
+    switch (action) {
+      case 'manageContributors':
+        this.router.navigate([resourceId, 'contributors']);
+        break;
+      case 'settings':
+        this.router.navigate([resourceId, 'settings']);
+        break;
+      case 'delete':
+        this.handleDeleteFork(resourceId);
+        break;
+    }
+  }
+
   handleForkResource(): void {
     const toolbarResource = this.toolbarResource();
     const dialogWidth = !this.isSmall() ? '95vw' : '450px';
diff --git a/src/app/features/project/overview/components/overview-components/overview-components.component.html b/src/app/features/project/overview/components/overview-components/overview-components.component.html
index 83c9afa5c..d560af5c1 100644
--- a/src/app/features/project/overview/components/overview-components/overview-components.component.html
+++ b/src/app/features/project/overview/components/overview-components/overview-components.component.html
@@ -24,32 +24,32 @@ <h2 class="flex align-items-center gap-2">
                 <a class="component-title" [href]="component.id">{{ component.title }}</a>
               </h2>
 
-              <div>
-                @if (isCurrentUserContributor(component)) {
+              @if (!isCurrentUserContributor(component)) {
+                <div>
                   <p-button
                     severity="contrast"
                     icon="fas fa-ellipsis-vertical"
                     raised
                     variant="outlined"
                     [ariaLabel]="'common.buttons.more' | translate"
-                    (onClick)="componentActionMenu.toggle($event)"
+                    (onClick)="menu.toggle($event)"
                   >
                   </p-button>
-                }
 
-                <p-menu appendTo="body" #componentActionMenu [model]="componentActionItems(component)" popup>
-                  <ng-template #item let-item>
-                    <a
-                      class="p-menu-item-link"
-                      (click)="handleMenuAction(item.action, item.componentId)"
-                      (keydown.enter)="handleMenuAction(item.action, item.componentId)"
-                      tabindex="0"
-                    >
-                      {{ item.label | translate }}
-                    </a>
-                  </ng-template>
-                </p-menu>
-              </div>
+                  <p-menu appendTo="body" [model]="componentActionItems(component)" popup #menu>
+                    <ng-template #item let-item>
+                      <a
+                        class="p-menu-item-link"
+                        (mousedown)="handleMenuAction(item.action, item.componentId)"
+                        (keydown.enter)="handleMenuAction(item.action, item.componentId)"
+                        tabindex="0"
+                      >
+                        {{ item.label | translate }}
+                      </a>
+                    </ng-template>
+                  </p-menu>
+                </div>
+              }
             </div>
 
             <div class="flex flex-wrap gap-1">