feat: restrict trigger fall-through issue to iOS

Author: insertish

Diff for: README.md

@@ -77,26 +77,26 @@ If you want to avoid wrapping your component in a span that listens for the brow
 
 ```jsx
 import { h } from "preact";
-import { ContextMenu, attachContextMenu } from "preact-context-menu";
+import { ContextMenu, useTriggerEvents } from "preact-context-menu";
 
 function Component() {
     return (
         <div>
             <ContextMenu id="unique_id">
                 My Context Menu
             </ContextMenu>
-            <div onContextMenu={attachContextMenu("unique_id")}>
+            <div {...useTriggerEvents("unique_id")}>
                 Right-click me to open context menu!
             </div>
-            <div onContextMenu={attachContextMenu("unique_id", { hello: "Hello, world!" })}>
+            <div {...useTriggerEvents("unique_id", { hello: "Hello, world!" })}>
                 Right-click me to open context menu with data!
             </div>
         </div>
     );
 }
 ```
 
-#### Opening a menu programatically
+#### Opening a menu programmatically
 
 A context menu can also be opened by calling the openContextMenu function with the context menu ID and optionally any data and/or the coordinates where the context menu should appear
 

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-context-menu",
-  "version": "0.4.0-patch.0",
+  "version": "0.4.1",
   "description": "A context menu in Preact",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

Diff for: src/util.ts

@@ -21,6 +21,8 @@ export const openContextMenu = (id: string, data?: any, coords?: Coords) => {
 
 var timeout = 0;
 
+const iOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent) || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
+
 /**
  * Bind context menu events to a Ref.
  * @param ref Ref object
@@ -30,35 +32,40 @@ var timeout = 0;
  * @param touchTimeout Long press duration to show context menu
  */
 export const useTriggerEvents = (id: string, data?: any, disabled?: boolean, touchTimeout = 610) => {
-    // For most browsers, we can use onContextMenu.
-    const onContextMenu = (event: JSX.TargetedMouseEvent<HTMLSpanElement>) => {
-        if (disabled === true) return;
-        openContextMenu(id, data, { x: event.clientX, y: event.clientY });
-        event.stopPropagation();
-        event.preventDefault();
-    };
+    if (iOS()) {
+        // On iOS devices, we need to manually handle the touch events.
+        const onTouchStart = (event: JSX.TargetedTouchEvent<HTMLSpanElement>) => {
+            if (disabled === true) return;
+            const touch = event.touches[0];
+            
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                openContextMenu(id, data, { x: touch.clientX, y: touch.clientY });
+            }, touchTimeout) as unknown as number;
+        };
 
-    // On iOS devices, we need to manually handle the touch events.
-    const onTouchStart = (event: JSX.TargetedTouchEvent<HTMLSpanElement>) => {
-        if (disabled === true) return;
-        const touch = event.touches[0];
-        
-        clearTimeout(timeout);
-        timeout = setTimeout(() => {
-            openContextMenu(id, data, { x: touch.clientX, y: touch.clientY });
-        }, touchTimeout) as unknown as number;
-    };
+        // Cancel context menu if we move, end or cancel the touch.
+        const onTouchCancel = () => {
+            clearTimeout(timeout);
+        };
 
-    // Cancel context menu if we move, end or cancel the touch.
-    const onTouchCancel = () => {
-        clearTimeout(timeout);
-    };
+        return {
+            onTouchStart,
+            onTouchCancel,
+            onTouchMove: onTouchCancel,
+            onTouchEnd: onTouchCancel
+        }
+    } else {
+        // For most browsers, we can use onContextMenu.
+        const onContextMenu = (event: JSX.TargetedMouseEvent<HTMLSpanElement>) => {
+            if (disabled === true) return;
+            openContextMenu(id, data, { x: event.clientX, y: event.clientY });
+            event.stopPropagation();
+            event.preventDefault();
+        };
 
-    return {
-        onContextMenu,
-        onTouchStart,
-        onTouchCancel,
-        onTouchMove: onTouchCancel,
-        onTouchEnd: onTouchCancel
+        return {
+            onContextMenu
+        }
     }
 }