fix: mobile context menu won't show on long press (excalidraw#4741)

* scribble fix only if not Android * Update src/components/App.tsx Co-authored-by: David Luzar <[email protected]>
cenkce · Feb 7, 2022 · d450c36 · d450c36
1 parent 66c92fc
commit d450c36
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -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",