From 9b13612c433b09e0c535ef0f1164ff92173bfee7 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Wed, 29 Jan 2020 18:10:34 +0100
Subject: [PATCH] Fix tooltips on chrome mobile

---
 resources/ts/components/tooltip.ts | 35 +++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/resources/ts/components/tooltip.ts b/resources/ts/components/tooltip.ts
index c8c4090..4bb6b9e 100644
--- a/resources/ts/components/tooltip.ts
+++ b/resources/ts/components/tooltip.ts
@@ -6,7 +6,7 @@ type Events = {
     [evnet: string]: (...any) => void,
 }
 
-type Trigger = "hover" | "focus";
+type Trigger = "hover" | "focus" | "long-press";
 
 const longPressTimeout = 1000;
 
@@ -14,10 +14,10 @@ const longPressTimeout = 1000;
 export class TooltipComponent extends Vue {
     @Prop({ type: String, default: "top" }) public placement: string;
     @Prop({ type: Number, default: 400 }) public delay: number;
-    @Prop({ type: Array, default: () => ["hover", "focus"]}) public triggers: Trigger[];
+    @Prop({ type: Array, default: () => ["hover", "focus", "long-press"]}) public triggers: Trigger[];
 
     public show: boolean = false;
-    public root: Element = null;
+    public root: HTMLElement = null;
 
     private _events: Events = {};
 
@@ -38,7 +38,7 @@ export class TooltipComponent extends Vue {
 
         let blocked: boolean = false;
 
-        if (this.triggers.includes("hover")) {
+        if (this.triggers.includes("hover") && !this.$isTouch) {
             let timeout;
 
             this._events['mouseenter'] = () => {
@@ -56,7 +56,7 @@ export class TooltipComponent extends Vue {
                 this._events['touchstart'] = () => {
                     // this is to prevent showing tooltips after tap
                     blocked = true;
-                    setTimeout(() => blocked = false, longPressTimeout);
+                    setTimeout(() => blocked = false, longPressTimeout - 50);
                 }
             }
 
@@ -69,6 +69,31 @@ export class TooltipComponent extends Vue {
             };
         }
 
+        if (this.triggers.includes("long-press") && this.$isTouch) {
+            let timeout;
+
+            this._events['touchstart'] = () => {
+                timeout = window.setTimeout(() => { this.show = true }, longPressTimeout);
+
+                // this is to prevent showing tooltips after tap
+                blocked = true;
+                setTimeout(() => blocked = false, longPressTimeout - 50);
+            };
+
+            this._events['touchend'] = ev => {
+                window.clearTimeout(timeout);
+
+                if (this.show) {
+                    ev.preventDefault();
+                    this.root.focus();
+                }
+            };
+
+            this._events['blur'] = () => {
+                this.show = false
+            };
+        }
+
         this._registerEventListeners();
     }