From bf2a9b02c6b3998378e1b8e9e22786fac2fed66f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 1 Apr 2025 08:05:46 -0700
Subject: [PATCH] Fix: correct tag removal button type, prevent dropdown open

---
 .../input/document-link/document-link.component.html       | 4 ++--
 .../app/components/common/input/tags/tags.component.html   | 2 +-
 .../components/common/input/tags/tags.component.spec.ts    | 4 ++--
 .../src/app/components/common/input/tags/tags.component.ts | 7 ++-----
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.html b/src-ui/src/app/components/common/input/document-link/document-link.component.html
index 6eb380f10..e2219a8fc 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@@ -40,14 +40,14 @@
     <ng-template ng-label-tmp let-document="item">
       <div class="d-flex align-items-center">
         @if (!disabled) {
-          <button class="btn p-0 lh-1" (click)="unselect(document)" type="button" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+          <button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
         }
         @if (document.title) {
           <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
             <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
           </a>
         } @else {
-          <span class="badge bg-light text-muted" (click)="unselect(document)" type="button" title="Remove link" i18n-title>
+          <span class="badge bg-light text-muted" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title>
             <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill"></i-bs>&nbsp;<span i18n>Not found</span>
           </span>
         }
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 23c680dd0..ea3c233ca 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -17,7 +17,7 @@
           (change)="onChange(value)">
 
           <ng-template ng-label-tmp let-item="item">
-            <button class="tag-wrap btn p-0 d-flex align-items-center" (click)="removeTag($event, item.id)" title="Remove tag" i18n-title>
+            <button class="tag-wrap btn p-0 d-flex align-items-center" (click)="removeTag(item.id)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove tag" i18n-title>
               <i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
index 7fdf11e53..ceac0ea1b 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@@ -154,11 +154,11 @@ describe('TagsComponent', () => {
   it('support remove tags', () => {
     component.tags = tags
     component.value = [1, 2]
-    component.removeTag(new PointerEvent('point'), 2)
+    component.removeTag(2)
     expect(component.value).toEqual([1])
 
     component.disabled = true
-    component.removeTag(new PointerEvent('point'), 1)
+    component.removeTag(1)
     expect(component.value).toEqual([1])
   })
 
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index 31ef65489..bfb11b748 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -118,13 +118,10 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  removeTag(event: PointerEvent, id: number) {
+  removeTag(tagID: number) {
     if (this.disabled) return
 
-    // prevent opening dropdown
-    event.stopImmediatePropagation()
-
-    let index = this.value.indexOf(id)
+    let index = this.value.indexOf(tagID)
     if (index > -1) {
       let oldValue = this.value
       oldValue.splice(index, 1)