Adding prevent clicks for long press & firefox. Still not good

src/app/components/episodes-list/episodes-list.component.html

@@ -2,13 +2,15 @@
 	<div class="episodes" #scrollView
 	     (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)"
 	     [horizontal]="true" [scrollWindow]="false">
-		<a *ngFor="let episode of this.episodes?.items" draggable="false"
+		<a *ngFor="let episode of this.episodes?.items; index as i;" draggable="false"
 		    routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
-		    appLongPress (longPressed)="this.openMenu()"
+		    appLongPress (longPressed)="this.openMenu(i)"
 		    class="episode" #itemsDom>
 			<button mat-icon-button class="moreBtn" tabindex="-1"
+			        [style.display]="this.openedIndex === i ? 'block' : undefined"
 			        [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"
-			        (click)="$event.stopImmediatePropagation(); $event.preventDefault()">
+			        (menuOpened)="this.openedIndex = i" (menuClosed)="this.openedIndex = undefined"
+			        (click)="$event.stopImmediatePropagation(); $event.preventDefault();">
 				<mat-icon>more_vert</mat-icon>
 			</button>
 			<div>

src/app/components/episodes-list/episodes-list.component.scss

@@ -148,7 +148,7 @@
 		}
 	}
 
-	&:host-context(.hoverEnabled) &:hover, &:focus
+	&:host-context(.hoverEnabled) &:hover, &:host-context(.hoverEnabled) &:focus
 	{
 		.moreBtn
 		{
@@ -176,11 +176,6 @@
 	}
 }
 
-.moreBtn:focus
-{
-	display: block !important;
-}
-
 .playIcon
 {
 	font-size: 64px;

src/app/components/episodes-list/episodes-list.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input, ViewChild } from "@angular/core";
+import { Component, Input, QueryList, ViewChild, ViewChildren } from "@angular/core";
 import { MatMenuTrigger } from "@angular/material/menu";
 import { DomSanitizer } from "@angular/platform-browser";
+import { first } from "rxjs/operators";
 import { Episode } from "../../models/resources/episode";
 import { HorizontalScroller } from "../../misc/horizontal-scroller";
 import { Page } from "../../models/page";
@@ -15,7 +16,8 @@ export class EpisodesListComponent extends HorizontalScroller
 {
 	@Input() displayShowTitle: boolean = false;
 	@Input() episodes: Page<Episode>;
-	@ViewChild(MatMenuTrigger) menu: MatMenuTrigger;
+	@ViewChildren(MatMenuTrigger) menus: QueryList<MatMenuTrigger>;
+	openedIndex: number = undefined;
 
 	constructor(private sanitizer: DomSanitizer, public client: HttpClient)
 	{
@@ -27,8 +29,10 @@ export class EpisodesListComponent extends HorizontalScroller
 		return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
 	}
 
-	openMenu(): void
+	openMenu(index: number): void
 	{
-		this.menu.openMenu();
+		const menu = this.menus.find((x, i) => i === index);
+		menu.focus();
+		menu.openMenu();
 	}
 }

src/app/misc/long-press.directive.ts

@@ -1,8 +1,14 @@
-import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@angular/core";
+import { Directive, Output, EventEmitter, HostListener, HostBinding, ElementRef } from "@angular/core";
 import MouseDownEvent = JQuery.MouseDownEvent;
 import TouchStartEvent = JQuery.TouchStartEvent;
-import MouseMoveEvent = JQuery.MouseMoveEvent;
-import TouchMoveEvent = JQuery.TouchMoveEvent;
+
+function cancelClick(event): void
+{
+	console.log("Cancel click")
+	event.preventDefault();
+	event.stopPropagation();
+	this.removeEventListener("click", cancelClick, true);
+}
 
 @Directive({
 	selector: `[appLongPress]`
@@ -12,6 +18,8 @@ export class LongPressDirective
 	@Output() longPressed = new EventEmitter();
 	private _timer: NodeJS.Timeout = null;
 
+	constructor(private ref: ElementRef) {}
+
 	@HostBinding('class.longpress')
 	get longPress(): boolean
 	{
@@ -30,16 +38,35 @@ export class LongPressDirective
 				return;
 			this.longPressed.emit();
 			this._timer = null;
+			// We must use the nativeElement ref and can't use a HostListener
+			// since Angular does not support capture phase listener.
+			// TODO this is used for firefox since firefox still trigger a click event
+			// FIXME find the best way to make it work for all, use a cancelclick like
+			//  so or find a way to prevent the event from ever happenning.
+			this.ref.nativeElement.addEventListener("click", cancelClick, true);
 		}, 500);
 	}
 
 	@HostListener("touchend", ["$event"])
 	@HostListener("mouseup", ["$event"])
+	end(): void
+	{
+		console.log("test");
+		// TODO this timeout is for chrome, chrome do not output a click event so the cancelClick should be removed.
+		// FIXME Chrome does not trigger a touchend event ether. So this is never called.
+		setTimeout(() =>
+		{
+			console.log("Timeout");
+			this.ref.nativeElement.removeEventListener("click", cancelClick, true);
+		}, 50);
+		this.cancel();
+	}
+
 	@HostListener("wheel", ["$event"])
 	@HostListener("scroll", ["$event"])
 	@HostListener("document.scroll", ["$event"])
 	@HostListener("window.scroll", ["$event"])
-	end(): void
+	cancel(): void
 	{
 		clearTimeout(this._timer);
 		this._timer = null;