Merge pull request #3927 from parasharrajat/fix-blue

Fix: blue screen issue on Safari Web

src/components/PressableWithSecondaryInteraction/index.js

@@ -1,11 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {Pressable} from 'react-native';
-import pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-
-const defaultProps = {
-    forwardedRef: () => {},
-};
+import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -42,7 +38,9 @@ class PressableWithSecondaryInteraction extends Component {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
         return (
             <Pressable
+                onPressIn={this.props.onPressIn}
                 onLongPress={this.props.onSecondaryInteraction}
+                onPressOut={this.props.onPressOut}
                 ref={el => this.pressableRef = el}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...defaultPressableProps}
@@ -53,7 +51,7 @@ class PressableWithSecondaryInteraction extends Component {
     }
 }
 
-PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes;
+PressableWithSecondaryInteraction.propTypes = propTypes;
 PressableWithSecondaryInteraction.defaultProps = defaultProps;
 export default React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -1,12 +1,8 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
-import {Pressable} from 'react-native';
 import * as Haptics from 'expo-haptics';
-import pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-
-const defaultProps = {
-    forwardedRef: () => {},
-};
+import {Pressable} from 'react-native';
+import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
@@ -17,20 +13,22 @@ const defaultProps = {
 const PressableWithSecondaryInteraction = props => (
     <Pressable
         ref={props.forwardedRef}
+        onPressIn={props.onPressIn}
         onLongPress={(e) => {
             e.preventDefault();
             Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).then(() => {
                 props.onSecondaryInteraction(e);
             });
         }}
+        onPressOut={props.onPressOut}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...(_.omit(props, 'onLongPress'))}
     >
         {props.children}
     </Pressable>
 );
 
-PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes;
+PressableWithSecondaryInteraction.propTypes = propTypes;
 PressableWithSecondaryInteraction.defaultProps = defaultProps;
 PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
 

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -1,6 +1,12 @@
 import PropTypes from 'prop-types';
 
-export default {
+const propTypes = {
+    /** The function that should be called when this pressable is pressedIn */
+    onPressIn: PropTypes.func,
+
+    /** The function that should be called when this pressable is pressedOut */
+    onPressOut: PropTypes.func,
+
     /** The function that should be called when this pressable is LongPressed or right-clicked. */
     onSecondaryInteraction: PropTypes.func.isRequired,
 
@@ -10,3 +16,11 @@ export default {
     /** The ref to the search input (may be null on small screen widths) */
     forwardedRef: PropTypes.func,
 };
+
+const defaultProps = {
+    forwardedRef: () => {},
+    onPressIn: () => {},
+    onPressOut: () => {},
+};
+
+export {propTypes, defaultProps};

src/libs/ControlSelection/index.js

@@ -0,0 +1,20 @@
+/**
+ * Block selection on the whole app
+ *
+ */
+function block() {
+    document.body.classList.add('disable-select');
+}
+
+/**
+ * Unblock selection on the whole app
+ *
+ */
+function unblock() {
+    document.body.classList.remove('disable-select');
+}
+
+export default {
+    block,
+    unblock,
+};

src/libs/ControlSelection/index.native.js

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

src/pages/home/report/ReportActionItem.js

@@ -24,6 +24,8 @@ import ConfirmModal from '../../../components/ConfirmModal';
 import compose from '../../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import {deleteReportComment} from '../../../libs/actions/Report';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import ControlSelection from '../../../libs/ControlSelection';
 
 const propTypes = {
     /** The ID of the report this action is on. */
@@ -56,6 +58,7 @@ const propTypes = {
     onLayout: PropTypes.func.isRequired,
 
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -269,6 +272,8 @@ class ReportActionItem extends Component {
             <>
                 <PressableWithSecondaryInteraction
                     ref={el => this.popoverAnchor = el}
+                    onPressIn={() => this.props.isSmallScreenWidth && ControlSelection.block()}
+                    onPressOut={() => ControlSelection.unblock()}
                     onSecondaryInteraction={this.showPopover}
                 >
                     <Hoverable resetsOnClickOutside={false}>
@@ -354,6 +359,7 @@ ReportActionItem.propTypes = propTypes;
 ReportActionItem.defaultProps = defaultProps;
 
 export default compose(
+    withWindowDimensions,
     withLocalize,
     withOnyx({
         draftMessage: {

web/index.html

@@ -28,6 +28,10 @@
         input[type=text] {
             -webkit-user-select: text !important;
         }
+        .disable-select * {
+            -webkit-user-select: none !important;
+            -webkit-touch-callout: none !important;
+        }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">