From d450c36581465d1909f2063e7e80e3031eee4efe Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Mon, 7 Feb 2022 19:46:29 +0100
Subject: [PATCH] fix: mobile context menu won't show on long press (#4741)

* scribble fix only if not Android

* Update src/components/App.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/components/App.tsx | 9 ++++++++-
 src/keys.ts            | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 8d2fc895..ef89c646 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -163,6 +163,7 @@ import {
   shouldRotateWithDiscreteAngle,
   isArrowKey,
   KEYS,
+  isAndroid,
 } from "../keys";
 import { distance2d, getGridPoint, isPathALoop } from "../math";
 import { renderScene } from "../renderer";
@@ -1274,7 +1275,10 @@ class App extends React.Component<AppProps, AppState> {
 
   private onTapStart = (event: TouchEvent) => {
     // fix for Apple Pencil Scribble
-    event.preventDefault();
+    // On Android, preventing the event would disable contextMenu on tap-hold
+    if (!isAndroid) {
+      event.preventDefault();
+    }
 
     if (!didTapTwice) {
       didTapTwice = true;
@@ -1297,6 +1301,9 @@ class App extends React.Component<AppProps, AppState> {
       didTapTwice = false;
       clearTimeout(tappedTwiceTimer);
     }
+    if (isAndroid) {
+      event.preventDefault();
+    }
 
     if (event.touches.length === 2) {
       this.setState({
diff --git a/src/keys.ts b/src/keys.ts
index bd20bbb0..fc495437 100644
--- a/src/keys.ts
+++ b/src/keys.ts
@@ -1,5 +1,6 @@
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
 export const isWindows = /^Win/.test(window.navigator.platform);
+export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
 
 export const CODES = {
   EQUAL: "Equal",