Fix: correct tag removal button type, prevent dropdown open

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 6eb380f106eae630038a7e27684ca2477b4a726d..e2219a8fc3193e2f964f126dc4239d9fd36ce1c8 100644 (file)
--- 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 23c680dd0b0324f1e96b7cc8fd115aab5ec388aa..ea3c233ca89ee3e27493d5f8b703a0986bab8e8c 100644 (file)
--- 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 7fdf11e534d3a6952839749c90f592ff9ae56bbd..ceac0ea1bcb016b3dae95e57203e2727491bcc82 100644 (file)
--- 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 31ef6548973771bce292f8a9428dc89a0c9a138a..bfb11b748fc7b927b89149598d5cac3db9ce21b4 100644 (file)
--- 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)