fix: suppress selection during standup long press

Author: idoshamun

packages/shared/src/hooks/useTouchLongPress.spec.tsx

@@ -0,0 +1,94 @@
+import type { TouchEvent } from 'react';
+import { act, renderHook } from '@testing-library/react';
+import { useTouchLongPress } from './useTouchLongPress';
+
+const createTouchEvent = (x = 0, y = 0): TouchEvent<Element> =>
+  ({
+    currentTarget: document.createElement('div'),
+    touches: [{ clientX: x, clientY: y }],
+  } as unknown as TouchEvent<Element>);
+
+describe('useTouchLongPress', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    document.documentElement.style.userSelect = '';
+    document.documentElement.style.removeProperty('-webkit-user-select');
+    jest.useRealTimers();
+  });
+
+  it('suppresses text selection while a long press is pending', () => {
+    const onLongPress = jest.fn();
+    const { result } = renderHook(() =>
+      useTouchLongPress({
+        enabled: true,
+        onLongPress,
+      }),
+    );
+
+    const previousUserSelect = 'text';
+    document.documentElement.style.userSelect = previousUserSelect;
+
+    act(() => {
+      result.current.onTouchStart(createTouchEvent(), 'message-1');
+    });
+
+    expect(document.documentElement.style.userSelect).toBe('none');
+
+    act(() => {
+      result.current.onTouchEnd();
+    });
+
+    expect(document.documentElement.style.userSelect).toBe(previousUserSelect);
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps selection suppressed until touch end after long press fires', () => {
+    const onLongPress = jest.fn();
+    const previousUserSelect = document.documentElement.style.userSelect;
+    const { result } = renderHook(() =>
+      useTouchLongPress({
+        enabled: true,
+        onLongPress,
+      }),
+    );
+
+    act(() => {
+      result.current.onTouchStart(createTouchEvent(), 'message-1');
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(onLongPress).toHaveBeenCalledWith('message-1');
+    expect(document.documentElement.style.userSelect).toBe('none');
+
+    act(() => {
+      result.current.onTouchEnd();
+    });
+
+    expect(document.documentElement.style.userSelect).toBe(previousUserSelect);
+  });
+
+  it('restores text selection when movement cancels the long press', () => {
+    const onLongPress = jest.fn();
+    const { result } = renderHook(() =>
+      useTouchLongPress({
+        enabled: true,
+        onLongPress,
+      }),
+    );
+
+    act(() => {
+      result.current.onTouchStart(createTouchEvent(), 'message-1');
+      result.current.onTouchMove(createTouchEvent(20, 0));
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(onLongPress).not.toHaveBeenCalled();
+    expect(document.documentElement.style.userSelect).toBe('');
+  });
+});

packages/shared/src/hooks/useTouchLongPress.ts

@@ -5,6 +5,7 @@ interface UseTouchLongPressOptions<T> {
   enabled: boolean;
   delayMs?: number;
   moveTolerancePx?: number;
+  suppressTextSelection?: boolean;
   onLongPress: (value: T) => void;
 }
 
@@ -18,20 +19,50 @@ export interface TouchLongPressHandlers<T> {
 const DEFAULT_LONG_PRESS_DELAY_MS = 500;
 const DEFAULT_MOVE_TOLERANCE_PX = 10;
 
+const suppressDocumentTextSelection = (
+  ownerDocument: Document,
+): (() => void) => {
+  const root = ownerDocument.documentElement;
+  const previousUserSelect = root.style.userSelect;
+  const previousWebkitUserSelect = root.style.getPropertyValue(
+    '-webkit-user-select',
+  );
+
+  ownerDocument.defaultView?.getSelection()?.removeAllRanges();
+  root.style.userSelect = 'none';
+  root.style.setProperty('-webkit-user-select', 'none');
+
+  return () => {
+    ownerDocument.defaultView?.getSelection()?.removeAllRanges();
+    root.style.userSelect = previousUserSelect;
+
+    if (previousWebkitUserSelect) {
+      root.style.setProperty('-webkit-user-select', previousWebkitUserSelect);
+      return;
+    }
+
+    root.style.removeProperty('-webkit-user-select');
+  };
+};
+
 export const useTouchLongPress = <T>({
   enabled,
   delayMs = DEFAULT_LONG_PRESS_DELAY_MS,
   moveTolerancePx = DEFAULT_MOVE_TOLERANCE_PX,
+  suppressTextSelection = true,
   onLongPress,
 }: UseTouchLongPressOptions<T>): TouchLongPressHandlers<T> => {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const startPosRef = useRef<{ x: number; y: number } | null>(null);
+  const restoreTextSelectionRef = useRef<(() => void) | null>(null);
 
   const cancelLongPress = useCallback((): void => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
+    restoreTextSelectionRef.current?.();
+    restoreTextSelectionRef.current = null;
     startPosRef.current = null;
   }, []);
 
@@ -55,13 +86,19 @@ export const useTouchLongPress = <T>({
         return;
       }
 
+      const { ownerDocument } = event.currentTarget;
       startPosRef.current = { x: touch.clientX, y: touch.clientY };
+      if (suppressTextSelection) {
+        restoreTextSelectionRef.current =
+          suppressDocumentTextSelection(ownerDocument);
+      }
       timerRef.current = setTimeout(() => {
         timerRef.current = null;
+        ownerDocument.defaultView?.getSelection()?.removeAllRanges();
         onLongPress(value);
       }, delayMs);
     },
-    [cancelLongPress, delayMs, enabled, onLongPress],
+    [cancelLongPress, delayMs, enabled, onLongPress, suppressTextSelection],
   );
 
   const onTouchMove = useCallback(