fix: mobile context menu behavior

lewxdev · Aug 4, 2024 · e17bd19 · e17bd19
1 parent 99096f1
commit e17bd19
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/app/hooks/use-long-press.ts b/app/hooks/use-long-press.ts
@@ -13,26 +13,38 @@ export function useLongPress({
 }: Options) {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleStart = (event: React.TouchEvent) => {
-    event.preventDefault();
+  const handleStart = () => {
     timeoutRef.current = setTimeout(() => {
       onLongPress();
+      navigator.vibrate?.(50);
       timeoutRef.current = null;
     }, threshold);
   };
 
   const handleEnd = (callback?: () => void) => (event: React.TouchEvent) => {
-    event.preventDefault();
+    if (event.cancelable) {
+      // prevent click event if tapped
+      event.preventDefault();
+    }
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
       callback?.();
     }
   };
 
+  const handleRightClick = (event: React.MouseEvent) => {
+    // prevent context menu
+    event.preventDefault();
+    // only trigger with secondary mouse button
+    if (event.button === 2) {
+      onLongPress();
+    }
+  };
+
   return {
     onClick: onPress,
-    onContextMenu: onLongPress,
+    onContextMenu: handleRightClick,
     onTouchStart: handleStart,
     onTouchEnd: handleEnd(onPress),
     onTouchCancel: handleEnd(),