From da9e263ca7a99ff20dc0289fc69efe4c20e6e6e9 Mon Sep 17 00:00:00 2001
From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:12:55 +0800
Subject: [PATCH] Avoid menu closure when filtering labels (#19561)

1. Fixes #19554

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../artifact-list-tab.component.html          |  3 +-
 .../label-selector.component.html             | 54 +++++++++++++------
 .../label-selector.component.ts               |  2 +
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
index 33117a053..6258f7a7d 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
@@ -80,12 +80,13 @@
                                 </button>
                                 <clr-dropdown-menu
                                     [hidden]="!selectedRow.length">
-                                    <div class="filter-grid" clrDropdownItem>
+                                    <div class="filter-grid">
                                         <label class="dropdown-header">{{
                                             'REPOSITORY.ADD_LABEL_TO_IMAGE'
                                                 | translate
                                         }}</label>
                                         <app-label-selector
+                                            [usedInDropdown]="true"
                                             [width]="200"
                                             [ownedLabels]="
                                                 selectedRow[0]?.labels
diff --git a/src/portal/src/app/shared/components/label-selector/label-selector.component.html b/src/portal/src/app/shared/components/label-selector/label-selector.component.html
index bdea45f23..456e69016 100644
--- a/src/portal/src/app/shared/components/label-selector/label-selector.component.html
+++ b/src/portal/src/app/shared/components/label-selector/label-selector.component.html
@@ -18,20 +18,44 @@
             (click)="goToLabelPage()">
             {{ 'LABEL.NO_LABELS' | translate }}
         </div>
-        <div [hidden]="!candidateLabels.length" class="has-label">
-            <button
-                type="button"
-                class="dropdown-item"
-                *ngFor="let label of candidateLabels"
-                (click)="selectLabel(label)">
-                <clr-icon
-                    shape="check"
-                    class="check-icon"
-                    [style.visibility]="isSelect(label) ? 'visible' : 'hidden'">
-                </clr-icon>
-                <hbr-label-piece [label]="label" [labelWidth]="130">
-                </hbr-label-piece>
-            </button>
-        </div>
+        <ng-container *ngIf="usedInDropdown; else notUsedInDropdown">
+            <div [hidden]="!candidateLabels.length" class="has-label">
+                <button
+                    clrDropdownItem
+                    type="button"
+                    class="dropdown-item"
+                    *ngFor="let label of candidateLabels"
+                    (click)="selectLabel(label)">
+                    <clr-icon
+                        shape="check"
+                        class="check-icon"
+                        [style.visibility]="
+                            isSelect(label) ? 'visible' : 'hidden'
+                        ">
+                    </clr-icon>
+                    <hbr-label-piece [label]="label" [labelWidth]="130">
+                    </hbr-label-piece>
+                </button>
+            </div>
+        </ng-container>
+        <ng-template #notUsedInDropdown>
+            <div [hidden]="!candidateLabels.length" class="has-label">
+                <button
+                    type="button"
+                    class="dropdown-item"
+                    *ngFor="let label of candidateLabels"
+                    (click)="selectLabel(label)">
+                    <clr-icon
+                        shape="check"
+                        class="check-icon"
+                        [style.visibility]="
+                            isSelect(label) ? 'visible' : 'hidden'
+                        ">
+                    </clr-icon>
+                    <hbr-label-piece [label]="label" [labelWidth]="130">
+                    </hbr-label-piece>
+                </button>
+            </div>
+        </ng-template>
     </div>
 </div>
diff --git a/src/portal/src/app/shared/components/label-selector/label-selector.component.ts b/src/portal/src/app/shared/components/label-selector/label-selector.component.ts
index 54264afb9..6a9120799 100644
--- a/src/portal/src/app/shared/components/label-selector/label-selector.component.ts
+++ b/src/portal/src/app/shared/components/label-selector/label-selector.component.ts
@@ -31,6 +31,8 @@ const PAGE_SIZE: number = 50;
     styleUrls: ['./label-selector.component.scss'],
 })
 export class LabelSelectorComponent implements OnInit, OnChanges, OnDestroy {
+    @Input()
+    usedInDropdown: boolean = false;
     @Input()
     ownedLabels: Label[] = [];
     @Input()