Fix backlink click on other areas/elements than link #136

src/app/shared/components/backlink/backlink.component.ts

@@ -1,15 +1,46 @@
-import { Component, Input } from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+} from "@angular/core";
 import { Params, RouterLink } from "@angular/router";
 
 @Component({
   selector: "erz-backlink",
   templateUrl: "./backlink.component.html",
   styleUrls: ["./backlink.component.scss"],
 })
-export class BacklinkComponent {
+export class BacklinkComponent implements AfterViewInit, OnDestroy {
   @Input()
   routerLink: RouterLink["routerLink"] = [];
 
   @Input()
   queryParams?: Params | null;
+
+  constructor(private element: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    // Since the component itself has a `routerLink` input, stop
+    // bubbling to avoid navigation when clicking on other elements
+    // than the actual <a> itself.
+    this.element.nativeElement.addEventListener(
+      "click",
+      this.stopPropagation,
+      true,
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.element.nativeElement.removeEventListener(
+      "click",
+      this.stopPropagation,
+      true,
+    );
+  }
+
+  private stopPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
 }

src/app/shared/components/reports-link/reports-link.component.html

@@ -4,7 +4,6 @@
   [href]="reports[0]?.url"
   target="_blank"
   [class.disabled]="disableIfUnavailable && reports.length === 0"
-  (click)="$event.stopPropagation()"
 >
   <i class="material-icons">description</i>
 </a>
@@ -21,7 +20,7 @@
     <button
       *ngFor="let report of reports"
       ngbDropdownItem
-      (click)="openReport($event, report)"
+      (click)="openReport(report)"
     >
       {{ report.title }}
     </button>

src/app/shared/components/reports-link/reports-link.component.ts

@@ -13,8 +13,7 @@ export class ReportsLinkComponent {
 
   dropdownId = uniqueId("reports-link-dropdown");
 
-  openReport(event: MouseEvent, report: Report): void {
-    event.stopPropagation();
+  openReport(report: Report): void {
     window.open(report.url, "_blank");
   }
 }