Merge pull request #28240 from akinwale/task-28047

fix: send message - user navigates to Room tab when dragging to select e-mail from Chat tab

src/components/MapView/responder/index.ts

@@ -1,8 +1,3 @@
-import {PanResponder} from 'react-native';
+import SwipeInterceptPanResponder from '../../SwipeInterceptPanResponder';
 
-const responder = PanResponder.create({
-    onMoveShouldSetPanResponder: () => true,
-    onPanResponderTerminationRequest: () => false,
-});
-
-export default responder;
+export default SwipeInterceptPanResponder;

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -379,6 +379,7 @@ class BaseOptionsSelector extends Component {
                 selectTextOnFocus
                 blurOnSubmit={Boolean(this.state.allOptions.length)}
                 spellCheck={false}
+                shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe}
             />
         );
         const optionsList = (

src/components/OptionsSelector/index.js

@@ -6,6 +6,7 @@ const OptionsSelector = forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
+        shouldTextInputInterceptSwipe
     />
 ));
 

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -124,6 +124,9 @@ const propTypes = {
 
     /** Initial focused index value */
     initialFocusedIndex: PropTypes.number,
+
+    /** Whether the text input should intercept swipes or not */
+    shouldTextInputInterceptSwipe: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -160,6 +163,7 @@ const defaultProps = {
     shouldUseStyleForChildren: true,
     isRowMultilineSupported: false,
     initialFocusedIndex: undefined,
+    shouldTextInputInterceptSwipe: false,
 };
 
 export {propTypes, defaultProps};

src/components/RoomNameInput/index.js

@@ -62,6 +62,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
+            shouldInterceptSwipe
         />
     );
 }

src/components/SwipeInterceptPanResponder.js

@@ -0,0 +1,8 @@
+import {PanResponder} from 'react-native';
+
+const SwipeInterceptPanResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderTerminationRequest: () => false,
+});
+
+export default SwipeInterceptPanResponder;

src/components/TextInput/BaseTextInput.js

@@ -22,6 +22,7 @@ import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 import withLocalize from '../withLocalize';
 import useNativeDriver from '../../libs/useNativeDriver';
 import * as Browser from '../../libs/Browser';
+import SwipeInterceptPanResponder from '../SwipeInterceptPanResponder';
 
 function BaseTextInput(props) {
     const initialValue = props.value || props.defaultValue || '';
@@ -256,7 +257,11 @@ function BaseTextInput(props) {
 
     return (
         <>
-            <View style={styles.pointerEventsNone}>
+            <View
+                style={styles.pointerEventsNone}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props.shouldInterceptSwipe && SwipeInterceptPanResponder.panHandlers)}
+            >
                 <PressableWithoutFeedback
                     onPress={onPress}
                     focusable={false}

src/components/TextInput/baseTextInputPropTypes.js

@@ -93,6 +93,9 @@ const propTypes = {
 
     /** Set the default value to the input if there is a valid saved value */
     shouldUseDefaultValue: PropTypes.bool,
+
+    /** Indicate whether or not the input should prevent swipe actions in tabs */
+    shouldInterceptSwipe: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -129,6 +132,7 @@ const defaultProps = {
     icon: null,
     shouldUseDefaultValue: false,
     multiline: false,
+    shouldInterceptSwipe: false,
 };
 
 export {propTypes, defaultProps};