Preventing long press on touch devices from selecting text of pressable elements (#2457)

Author: LFDanLu

packages/@react-aria/interactions/src/textSelection.ts

@@ -21,52 +21,75 @@ import {isIOS, runAfterTransition} from '@react-aria/utils';
 // There are three possible states due to the delay before removing user-select: none after
 // pointer up. The 'default' state always transitions to the 'disabled' state, which transitions
 // to 'restoring'. The 'restoring' state can either transition back to 'disabled' or 'default'.
+
+// For non-iOS devices, we apply user-select: none to the pressed element instead to avoid possible
+// performance issues that arise from applying and removing user-select: none to the entire page
+// (see https://github.com/adobe/react-spectrum/issues/1609).
 type State = 'default' | 'disabled' | 'restoring';
 
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
 let state: State = 'default';
 let savedUserSelect = '';
+let modifiedElementMap = new WeakMap<HTMLElement, string>();
 
-export function disableTextSelection() {
-  // Limit this behavior to iOS only. Android devices don't text select nearby element
-  // when long pressing on a different element.
-  if (!isIOS()) {
-    return;
-  }
+export function disableTextSelection(target?: HTMLElement) {
+  if (isIOS()) {
+    if (state === 'default') {
+      savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = 'none';
+    }
 
-  if (state === 'default') {
-    savedUserSelect = document.documentElement.style.webkitUserSelect;
-    document.documentElement.style.webkitUserSelect = 'none';
+    state = 'disabled';
+  } else if (target) {
+    // If not iOS, store the target's original user-select and change to user-select: none
+    // Ignore state since it doesn't apply for non iOS
+    modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
   }
-
-  state = 'disabled';
 }
 
-export function restoreTextSelection() {
-  // If the state is already default, there's nothing to do.
-  // If it is restoring, then there's no need to queue a second restore.
-  // Limit this behavior to iOS only. Android devices don't text select nearby element
-  // when long pressing on a different element.
-  if (state !== 'disabled' || !isIOS()) {
-    return;
-  }
+export function restoreTextSelection(target?: HTMLElement) {
+  if (isIOS()) {
+    // If the state is already default, there's nothing to do.
+    // If it is restoring, then there's no need to queue a second restore.
+    if (state !== 'disabled') {
+      return;
+    }
 
-  state = 'restoring';
+    state = 'restoring';
 
-  // There appears to be a delay on iOS where selection still might occur
-  // after pointer up, so wait a bit before removing user-select.
-  setTimeout(() => {
-    // Wait for any CSS transitions to complete so we don't recompute style
-    // for the whole page in the middle of the animation and cause jank.
-    runAfterTransition(() => {
-      // Avoid race conditions
-      if (state === 'restoring') {
-        if (document.documentElement.style.webkitUserSelect === 'none') {
-          document.documentElement.style.webkitUserSelect = savedUserSelect || '';
+    // There appears to be a delay on iOS where selection still might occur
+    // after pointer up, so wait a bit before removing user-select.
+    setTimeout(() => {
+      // Wait for any CSS transitions to complete so we don't recompute style
+      // for the whole page in the middle of the animation and cause jank.
+      runAfterTransition(() => {
+        // Avoid race conditions
+        if (state === 'restoring') {
+          if (document.documentElement.style.webkitUserSelect === 'none') {
+            document.documentElement.style.webkitUserSelect = savedUserSelect || '';
+          }
+
+          savedUserSelect = '';
+          state = 'default';
         }
+      });
+    }, 300);
+  } else {
+    // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    if (target && modifiedElementMap.has(target)) {
+      let targetOldUserSelect = modifiedElementMap.get(target);
+
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
+      }
 
-        savedUserSelect = '';
-        state = 'default';
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
       }
-    });
-  }, 300);
+      modifiedElementMap.delete(target);
+    }
+  }
 }

packages/@react-aria/interactions/src/usePress.ts

@@ -35,7 +35,9 @@ export interface PressProps extends PressEvents {
    * still pressed, onPressStart will be fired again. If set to `true`, the press is canceled
    * when the pointer leaves the target and onPressStart will not be fired if the pointer returns.
    */
-  shouldCancelOnPointerExit?: boolean
+  shouldCancelOnPointerExit?: boolean,
+  /** Whether text selection should be enabled on the pressable element. */
+  allowTextSelectionOnPress?: boolean
 }
 
 export interface PressHookProps extends PressProps {
@@ -99,6 +101,7 @@ export function usePress(props: PressHookProps): PressResult {
     isPressed: isPressedProp,
     preventFocusOnPress,
     shouldCancelOnPointerExit,
+    allowTextSelectionOnPress,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ref: _, // Removing `ref` from `domProps` because TypeScript is dumb,
     ...domProps
@@ -217,7 +220,9 @@ export function usePress(props: PressHookProps): PressResult {
         state.activePointerId = null;
         state.pointerType = null;
         removeAllGlobalListeners();
-        restoreTextSelection();
+        if (!allowTextSelectionOnPress) {
+          restoreTextSelection(state.target);
+        }
       }
     };
 
@@ -329,7 +334,10 @@ export function usePress(props: PressHookProps): PressResult {
             focusWithoutScrolling(e.currentTarget);
           }
 
-          disableTextSelection();
+          if (!allowTextSelectionOnPress) {
+            disableTextSelection(state.target);
+          }
+
           triggerPressStart(e, state.pointerType);
 
           addGlobalListener(document, 'pointermove', onPointerMove, false);
@@ -404,7 +412,9 @@ export function usePress(props: PressHookProps): PressResult {
           state.activePointerId = null;
           state.pointerType = null;
           removeAllGlobalListeners();
-          restoreTextSelection();
+          if (!allowTextSelectionOnPress) {
+            restoreTextSelection(state.target);
+          }
         }
       };
 
@@ -535,7 +545,10 @@ export function usePress(props: PressHookProps): PressResult {
           focusWithoutScrolling(e.currentTarget);
         }
 
-        disableTextSelection();
+        if (!allowTextSelectionOnPress) {
+          disableTextSelection(state.target);
+        }
+
         triggerPressStart(e, state.pointerType);
 
         addGlobalListener(window, 'scroll', onScroll, true);
@@ -588,7 +601,9 @@ export function usePress(props: PressHookProps): PressResult {
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
-        restoreTextSelection();
+        if (!allowTextSelectionOnPress) {
+          restoreTextSelection(state.target);
+        }
         removeAllGlobalListeners();
       };
 
@@ -625,13 +640,17 @@ export function usePress(props: PressHookProps): PressResult {
     }
 
     return pressProps;
-  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners]);
+  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress]);
 
   // Remove user-select: none in case component unmounts immediately after pressStart
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
-    return () => restoreTextSelection();
-  }, []);
+    return () => {
+      if (!allowTextSelectionOnPress) {
+        restoreTextSelection(ref.current.target);
+      }
+    };
+  }, [allowTextSelectionOnPress]);
 
   return {
     isPressed: isPressedProp || isPressed,