Fix usePress user-select not removed on HTML element (#926)

* fix usePress user-select not removed

* add tests for usePress user-select not removed

* Use global state to avoid race conditions between multiple elements

Co-authored-by: Devon Govett <[email protected]>

Author: zidian257

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {runAfterTransition} from '@react-aria/utils';
+
+// Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
+// is to add user-select: none to the entire page. Adding it to the pressable element prevents
+// that element from being selected, but nearby elements may still receive selection. We add
+// user-select: none on touch start, and remove it again on touch end to prevent this.
+// This must be implemented using global state to avoid race conditions between multiple elements.
+
+// 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'.
+type State = 'default' | 'disabled' | 'restoring';
+
+let state: State = 'default';
+let savedUserSelect = '';
+
+export function disableTextSelection() {
+  if (state === 'default') {
+    savedUserSelect = document.documentElement.style.webkitUserSelect;
+    document.documentElement.style.webkitUserSelect = '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.
+  if (state !== 'disabled') {
+    return;
+  }
+
+  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 || '';
+        }
+
+        savedUserSelect = '';
+        state = 'default';
+      }
+    });
+  }, 300);
+}

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

@@ -15,7 +15,8 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {focusWithoutScrolling, mergeProps, runAfterTransition} from '@react-aria/utils';
+import {disableTextSelection, restoreTextSelection} from './textSelection';
+import {focusWithoutScrolling, mergeProps} from '@react-aria/utils';
 import {HTMLAttributes, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {isVirtualClick} from './utils';
 import {PointerType, PressEvents} from '@react-types/shared';
@@ -115,11 +116,11 @@ export function usePress(props: PressHookProps): PressResult {
   let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
     globalListeners.current.set(listener, {type, eventTarget, options});
     eventTarget.addEventListener(type, listener, options);
-  }, [globalListeners.current]);
+  }, []);
   let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
     eventTarget.removeEventListener(type, listener, options);
     globalListeners.current.delete(listener);
-  }, [globalListeners.current]);
+  }, []);
 
   let pressProps = useMemo(() => {
     let state = ref.current;
@@ -268,31 +269,6 @@ export function usePress(props: PressHookProps): PressResult {
       }
     };
 
-    // Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
-    // is to add user-select: none to the entire page. Adding it to the pressable element prevents
-    // that element from being selected, but nearby elements may still receive selection. We add
-    // user-select: none on touch start, and remove it again on touch end to prevent this.
-    let disableTextSelection = () => {
-      state.userSelect = document.documentElement.style.webkitUserSelect;
-      document.documentElement.style.webkitUserSelect = 'none';
-    };
-
-    let restoreTextSelection = () => {
-      // 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.isPressed && document.documentElement.style.webkitUserSelect === 'none') {
-            document.documentElement.style.webkitUserSelect = state.userSelect || '';
-            state.userSelect = null;
-          }
-        });
-      }, 300);
-    };
-
     if (typeof PointerEvent !== 'undefined') {
       pressProps.onPointerDown = (e) => {
         // Only handle left clicks
@@ -564,7 +540,7 @@ export function usePress(props: PressHookProps): PressResult {
     }
 
     return pressProps;
-  }, [onPress, onPressStart, onPressEnd, onPressChange, onPressUp, isDisabled]);
+  }, [isDisabled, onPressStart, onPressChange, onPressEnd, onPress, onPressUp, addGlobalListener, preventFocusOnPress, removeGlobalListener]);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
@@ -573,7 +549,7 @@ export function usePress(props: PressHookProps): PressResult {
         removeGlobalListener(value.eventTarget, value.type, key, value.options);
       });
     };
-  }, [globalListeners.current]);
+  }, [removeGlobalListener]);
 
   return {
     isPressed: isPressedProp || isPressed,

packages/@react-aria/interactions/test/usePress.test.js

@@ -32,6 +32,20 @@ function pointerEvent(type, opts) {
 }
 
 describe('usePress', function () {
+  beforeAll(() => {
+    jest.useFakeTimers();
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    window.requestAnimationFrame.mockRestore();
+  });
+
+  afterEach(() => {
+    jest.runAllTimers();
+  });
+
   // TODO: JSDOM doesn't yet support pointer events. Once they do, convert these tests.
   // https://github.com/jsdom/jsdom/issues/2527
   describe('pointer events', function () {
@@ -1651,4 +1665,103 @@ describe('usePress', function () {
 
     expect(document.activeElement).toBe(el);
   });
+
+  describe('disable text-selection when pressed', function () {
+    let handler = jest.fn();
+    let mockUserSelect = 'contain';
+    let oldUserSelect = document.documentElement.style.webkitUserSelect;
+
+    afterAll(() => {
+      handler.mockClear();
+    });
+
+    beforeEach(() => {
+      document.documentElement.style.webkitUserSelect = mockUserSelect;
+    });
+    afterEach(() => {
+      document.documentElement.style.webkitUserSelect = oldUserSelect;
+    });
+
+    it('should add user-select: none to html element when press start', function () {
+      let {getByText} = render(
+        <Example
+          onPressStart={handler}
+          onPressEnd={handler}
+          onPressChange={handler}
+          onPress={handler}
+          onPressUp={handler} />
+      );
+
+      let el = getByText('test');
+      fireEvent.touchStart(el, {targetTouches: [{identifier: 1}]});
+      expect(document.documentElement.style.webkitUserSelect).toBe('none');
+    });
+
+    it('should remove user-select: none to html element when press end', function () {
+      let {getByText} = render(
+        <Example
+          onPressStart={handler}
+          onPressEnd={handler}
+          onPressChange={handler}
+          onPress={handler}
+          onPressUp={handler} />
+      );
+
+      let el = getByText('test');
+
+      fireEvent.touchStart(el, {targetTouches: [{identifier: 1}]});
+      fireEvent.touchEnd(el, {changedTouches: [{identifier: 1}]});
+
+      jest.advanceTimersByTime(300);
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+
+      // Checkbox doesn't remove `user-select: none;` style from HTML Element issue
+      // see https://github.com/adobe/react-spectrum/issues/862
+      fireEvent.touchStart(el, {targetTouches: [{identifier: 1}]});
+      fireEvent.touchEnd(el, {changedTouches: [{identifier: 1}]});
+      fireEvent.touchStart(el, {targetTouches: [{identifier: 1}]});
+      fireEvent.touchMove(el, {changedTouches: [{identifier: 1, clientX: 100, clientY: 100}]});
+      jest.advanceTimersByTime(300);
+      fireEvent.touchEnd(el, {changedTouches: [{identifier: 1, clientX: 100, clientY: 100}]});
+      jest.advanceTimersByTime(300);
+
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+    });
+
+    it('should not remove user-select: none when pressing two different elements quickly', function () {
+      let {getAllByText} = render(
+        <>
+          <Example
+            onPressStart={handler}
+            onPressEnd={handler}
+            onPressChange={handler}
+            onPress={handler}
+            onPressUp={handler} />
+          <Example
+            onPressStart={handler}
+            onPressEnd={handler}
+            onPressChange={handler}
+            onPress={handler}
+            onPressUp={handler} />
+        </>
+      );
+
+      let els = getAllByText('test');
+
+      fireEvent.touchStart(els[0], {targetTouches: [{identifier: 1}]});
+      fireEvent.touchEnd(els[0], {changedTouches: [{identifier: 1}]});
+
+      expect(document.documentElement.style.webkitUserSelect).toBe('none');
+
+      fireEvent.touchStart(els[1], {targetTouches: [{identifier: 1}]});
+
+      jest.advanceTimersByTime(300);
+      expect(document.documentElement.style.webkitUserSelect).toBe('none');
+
+      fireEvent.touchEnd(els[1], {changedTouches: [{identifier: 1}]});
+
+      jest.advanceTimersByTime(300);
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+    });
+  });
 });