Merge pull request #22621 from tienifr/fix/22271-room-name-input-bloc…

…k-screen-transition Fix: Room name input blocks screen transition
Expensify · Jul 12, 2023 · a3404b1 · a3404b1
2 parents e673d3f + 5e62e4b
commit a3404b1
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
@@ -37,6 +37,8 @@ function RoomNamePage(props) {
     const reports = props.reports;
     const translate = props.translate;
 
+    const roomNameInputRef = useRef(null);
+
     const validate = useCallback(
         (values) => {
             const errors = {};
@@ -66,7 +68,11 @@ function RoomNamePage(props) {
     );
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            // Room name input autofocusing may block screen transition on Safari
+            onEntryTransitionEnd={() => roomNameInputRef.current && roomNameInputRef.current.focus()}
+        >
             <HeaderWithBackButton
                 title={translate('newRoomPage.roomName')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.getReportSettingsRoute(report.reportID))}
@@ -81,8 +87,8 @@ function RoomNamePage(props) {
             >
                 <View style={styles.mb4}>
                     <RoomNameInput
+                        ref={(ref) => (roomNameInputRef.current = ref)}
                         inputID="roomName"
-                        autoFocus
                         defaultValue={report.reportName}
                     />
                 </View>