Revert "Add focus trap to the RHP"

package.json

@@ -94,7 +94,6 @@
     "domhandler": "^4.3.0",
     "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#35bff866a8d345b460ea6256f0a0f0a8a7f81086",
     "fbjs": "^3.0.2",
-    "focus-trap-react": "^10.2.1",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",
     "jest-when": "^3.5.2",

src/components/ScreenWrapper/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {PickerAvoidingView} from 'react-native-picker-select';
-import FocusTrapView from '../FocusTrapView';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
@@ -125,26 +124,20 @@ class ScreenWrapper extends React.Component {
                                         style={styles.flex1}
                                         enabled={this.props.shouldEnablePickerAvoiding}
                                     >
-                                        <FocusTrapView
-                                            style={[styles.flex1, styles.noSelect]}
-                                            enabled={!this.props.shouldDisableFocusTrap}
-                                            shouldEnableAutoFocus={this.props.shouldEnableAutoFocus}
-                                        >
-                                            <HeaderGap styles={this.props.headerGapStyles} />
-                                            {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
-                                            {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
-                                            {
-                                                // If props.children is a function, call it to provide the insets to the children.
-                                                _.isFunction(this.props.children)
-                                                    ? this.props.children({
-                                                          insets,
-                                                          safeAreaPaddingBottomStyle,
-                                                          didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                                      })
-                                                    : this.props.children
-                                            }
-                                            {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator style={this.props.offlineIndicatorStyle} />}
-                                        </FocusTrapView>
+                                        <HeaderGap styles={this.props.headerGapStyles} />
+                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
+                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
+                                        {
+                                            // If props.children is a function, call it to provide the insets to the children.
+                                            _.isFunction(this.props.children)
+                                                ? this.props.children({
+                                                      insets,
+                                                      safeAreaPaddingBottomStyle,
+                                                      didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                                  })
+                                                : this.props.children
+                                        }
+                                        {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator style={this.props.offlineIndicatorStyle} />}
                                     </PickerAvoidingView>
                                 </KeyboardAvoidingView>
                             </View>

src/components/ScreenWrapper/propTypes.js

@@ -48,12 +48,6 @@ const propTypes = {
 
     /** Styles for the offline indicator */
     offlineIndicatorStyle: stylePropTypes,
-
-    /** Whether to disable the focus trap */
-    shouldDisableFocusTrap: PropTypes.bool,
-
-    /** Whether to disable auto focus of the focus trap */
-    shouldEnableAutoFocus: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -69,8 +63,6 @@ const defaultProps = {
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
     headerGapStyles: [],
-    shouldDisableFocusTrap: false,
-    shouldEnableAutoFocus: false,
 };
 
 export {propTypes, defaultProps};

src/pages/ProfilePage.js

@@ -144,7 +144,7 @@ function ProfilePage(props) {
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
     return (
-        <ScreenWrapper shouldEnableAutoFocus>
+        <ScreenWrapper>
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}

src/pages/home/ReportScreen.js

@@ -299,7 +299,6 @@ function ReportScreen({
             <ScreenWrapper
                 style={screenWrapperStyle}
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
-                shouldDisableFocusTrap
             >
                 <FullPageNotFoundView
                     shouldShow={(!report.reportID && !report.isLoadingReportActions && !isLoading) || shouldHideReport}

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -34,7 +34,6 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
-            shouldDisableFocusTrap
         >
             {({insets}) => (
                 <>