Improve the cross-browser consistency of useExtendedTouchActive

Author: rafgraph

README.md

@@ -392,6 +392,11 @@ Default value: `false`
 
 By default React Interactive only stays in the `touchActive` state while a `click` event (from the touch interaction) is still possible. To remain in the `touchActive` state for as long as the touch point is on the screen, pass in the `useExtendedTouchActive` prop. This can be useful for implementing functionality such as show on `touchActive`, long press, etc.
 
+Note that anchor tags, `<a>`, on touch devices have their own device/browser specific behavior for long press (context/callout menu, dragging, etc). If you need to disable the native behavior for long press of links you can:
+- Set a `onContextMenu` event listener and call `preventDefault()`, to prevent the context menu from appearing.
+- Set `-webkit-touch-callout: none` style to prevent the iOS "context menu" from appearing (iOS doesn't support `contextmenu` events).
+- Set `draggable="false"` on the `<a>` element (by passing it in as a prop).
+
 ---
 
 ### `ref`: object `ref` | callback `ref`

src/index.tsx

@@ -617,26 +617,8 @@ const InteractiveNotMemoized: PolymorphicForwardRefExoticComponent<
 
   ////////////////////////////////////
 
-  // prevent the context menu from popping up on long touch when useExtendedTouchActive is true
-  const { onContextMenu } = restProps;
-  const handleContextMenuEvent = React.useCallback(
-    (e: React.MouseEvent) => {
-      if (inTouchActiveState && useExtendedTouchActive) {
-        e.preventDefault();
-      }
-      if (onContextMenu) {
-        (onContextMenu as React.MouseEventHandler)(e);
-      }
-    },
-    [inTouchActiveState, useExtendedTouchActive, onContextMenu],
-  );
-
-  ////////////////////////////////////
-
   // create object with event listeners to pass to <As {...eventListeners}>
-  const eventListeners: Record<string, React.ReactEventHandler> = {
-    onContextMenu: handleContextMenuEvent,
-  };
+  const eventListeners: Record<string, React.ReactEventHandler> = {};
   eventListenerPropNames.forEach((listenerPropName) => {
     eventListeners[listenerPropName] = handleEvent;
   });
@@ -705,11 +687,6 @@ const InteractiveNotMemoized: PolymorphicForwardRefExoticComponent<
   ) {
     style.cursor = 'pointer';
   }
-  if (inTouchActiveState && useExtendedTouchActive) {
-    // set webkit-touch-callout: none to prevent the iOS "context menu" from popping up on long touch
-    // note that iOS doesn't fire contextmenu events so need to set webkit-touch-callout
-    style.WebkitTouchCallout = 'none';
-  }
 
   // add style prop passed to RI
   Object.assign(style, restProps.style);
@@ -812,11 +789,6 @@ const InteractiveNotMemoized: PolymorphicForwardRefExoticComponent<
 
   return (
     <As
-      // if useExtendedTouchActive then prevent long touch from dragging links
-      // allow draggable to be overridden by passed in draggable prop from restProps
-      draggable={
-        inTouchActiveState && useExtendedTouchActive ? false : undefined
-      }
       {...restProps}
       {...eventListeners}
       {...disabledProps}