Merge pull request #14381 from jatinsonijs/fix-safari-ibeam-on-drag

Prevent slider and image drag i-beam cursor on safari

src/components/AvatarCropModal/ImageCropView.js

@@ -8,6 +8,7 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import * as StyleUtils from '../../styles/StyleUtils';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
+import ControlSelection from '../../libs/ControlSelection';
 
 const propTypes = {
     /** Link to image for cropping   */
@@ -63,9 +64,11 @@ const ImageCropView = (props) => {
         };
     }, [props.originalImageHeight, props.originalImageWidth]);
 
+    // We're preventing text selection with ControlSelection.blockElement to prevent safari
+    // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688
     return (
         <PanGestureHandler onGestureEvent={props.panGestureEventHandler}>
-            <Animated.View style={[containerStyle, styles.imageCropContainer]}>
+            <Animated.View ref={ControlSelection.blockElement} style={[containerStyle, styles.imageCropContainer]}>
                 <Animated.Image style={[imageStyle, styles.h100, styles.w100]} source={{uri: props.imageUri}} resizeMode="contain" />
                 <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
                     <Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />

src/components/AvatarCropModal/Slider.js

@@ -5,6 +5,7 @@ import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import styles from '../../styles/styles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
+import ControlSelection from '../../libs/ControlSelection';
 
 const propTypes = {
     /** React-native-reanimated lib handler which executes when the user is panning slider */
@@ -27,8 +28,10 @@ const Slider = (props) => {
         transform: [{translateX: props.sliderValue.value}],
     }));
 
+    // We're preventing text selection with ControlSelection.blockElement to prevent safari
+    // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688
     return (
-        <View style={styles.sliderBar}>
+        <View ref={ControlSelection.blockElement} style={styles.sliderBar}>
             <PanGestureHandler onGestureEvent={props.onGesture}>
                 <Animated.View style={[styles.sliderKnob, rSliderStyle]} />
             </PanGestureHandler>

src/libs/ControlSelection/index.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+
 /**
  * Block selection on the whole app
  *
@@ -14,7 +16,31 @@ function unblock() {
     document.body.classList.remove('disable-select');
 }
 
+/**
+ * Block selection on particular element
+ * @param {Element} ref
+ */
+function blockElement(ref) {
+    if (_.isNull(ref)) { return; }
+
+    // eslint-disable-next-line no-param-reassign
+    ref.onselectstart = () => false;
+}
+
+/**
+ * Unblock selection on particular element
+ * @param {Element} ref
+ */
+function unblockElement(ref) {
+    if (_.isNull(ref)) { return; }
+
+    // eslint-disable-next-line no-param-reassign
+    ref.onselectstart = () => true;
+}
+
 export default {
     block,
     unblock,
+    blockElement,
+    unblockElement,
 };

src/libs/ControlSelection/index.native.js

@@ -1,7 +1,11 @@
 function block() {}
 function unblock() {}
+function blockElement() {}
+function unblockElement() {}
 
 export default {
     block,
     unblock,
+    blockElement,
+    unblockElement,
 };