Making disable text selection in usePress only occur on iOS (#2440)

* making disable text selection in usePress only occur on iOS

* whoops need to actually call it

* making user-select:none only apply for iOS

* fixing useMove tests

Author: LFDanLu

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {runAfterTransition} from '@react-aria/utils';
+import {isIOS, 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
@@ -27,6 +27,12 @@ let state: State = 'default';
 let savedUserSelect = '';
 
 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;
+  }
+
   if (state === 'default') {
     savedUserSelect = document.documentElement.style.webkitUserSelect;
     document.documentElement.style.webkitUserSelect = 'none';
@@ -38,7 +44,9 @@ export function disableTextSelection() {
 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') {
+  // 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;
   }
 

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

@@ -183,15 +183,25 @@ describe('useMove', function () {
   describe('user-select: none', () => {
     let mockUserSelect = 'contain';
     let oldUserSelect = document.documentElement.style.webkitUserSelect;
+    let platformGetter;
+
+    beforeAll(() => {
+      platformGetter = jest.spyOn(window.navigator, 'platform', 'get');
+    });
+
+    afterAll(() => {
+      jest.restoreAllMocks();
+    });
 
     beforeEach(() => {
       document.documentElement.style.webkitUserSelect = mockUserSelect;
+      platformGetter.mockReturnValue('iPhone');
     });
     afterEach(() => {
       document.documentElement.style.webkitUserSelect = oldUserSelect;
     });
 
-    it('adds and removes user-select: none to the body', function () {
+    it('adds and removes user-select: none to the body (iOS)', function () {
       let tree = render(
         <Example
           onMoveStart={() => {}}
@@ -211,6 +221,26 @@ describe('useMove', function () {
       act(() => {jest.advanceTimersByTime(300);});
       expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
     });
+
+    it('doesn\'t add user-select: none to the body (non-iOS)', function () {
+      platformGetter.mockReturnValue('Android');
+      let tree = render(
+        <Example
+          onMoveStart={() => {}}
+          onMove={() => {}}
+          onMoveEnd={() => {}} />
+      );
+
+      let el = tree.getByTestId(EXAMPLE_ELEMENT_TESTID);
+
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+      fireEvent.touchStart(el, {changedTouches: [{identifier: 1, pageX: 1, pageY: 30}]});
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+      fireEvent.touchMove(el, {changedTouches: [{identifier: 1, pageX: 10, pageY: 25}]});
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+      fireEvent.touchEnd(el, {changedTouches: [{identifier: 1, pageX: 10, pageY: 25}]});
+      expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
+    });
   });
 
   it('doesn\'t bubble to useMove on parent elements', function () {

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

@@ -2194,19 +2194,26 @@ describe('usePress', function () {
     let handler = jest.fn();
     let mockUserSelect = 'contain';
     let oldUserSelect = document.documentElement.style.webkitUserSelect;
+    let platformGetter;
+
+    beforeAll(() => {
+      platformGetter = jest.spyOn(window.navigator, 'platform', 'get');
+    });
 
     afterAll(() => {
       handler.mockClear();
+      jest.restoreAllMocks();
     });
 
     beforeEach(() => {
       document.documentElement.style.webkitUserSelect = mockUserSelect;
+      platformGetter.mockReturnValue('iPhone');
     });
     afterEach(() => {
       document.documentElement.style.webkitUserSelect = oldUserSelect;
     });
 
-    it('should add user-select: none to html element when press start', function () {
+    it('should add user-select: none to html element when press start (iOS)', function () {
       let {getByText} = render(
         <Example
           onPressStart={handler}
@@ -2221,7 +2228,23 @@ describe('usePress', function () {
       expect(document.documentElement.style.webkitUserSelect).toBe('none');
     });
 
-    it('should remove user-select: none to html element when press end', function () {
+    it('should not add user-select: none to html element when press start (non-iOS)', function () {
+      platformGetter.mockReturnValue('Android');
+      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(mockUserSelect);
+    });
+
+    it('should remove user-select: none to html element when press end (iOS)', function () {
       let {getByText} = render(
         <Example
           onPressStart={handler}
@@ -2252,7 +2275,7 @@ describe('usePress', function () {
       expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
     });
 
-    it('should not remove user-select: none when pressing two different elements quickly', function () {
+    it('should not remove user-select: none when pressing two different elements quickly (iOS)', function () {
       let {getAllByText} = render(
         <>
           <Example
@@ -2288,7 +2311,7 @@ describe('usePress', function () {
       expect(document.documentElement.style.webkitUserSelect).toBe(mockUserSelect);
     });
 
-    it('should remove user-select: none from html element if pressable component unmounts', function () {
+    it('should remove user-select: none from html element if pressable component unmounts (iOS)', function () {
       let {getByText, unmount} = render(
         <Example
           onPressStart={handler}