Merge pull request #28646 from akinwale/task-27607

fix: room name field does not automatically focus when returning from the chat option

src/hooks/useDelayedInputFocus.js

@@ -0,0 +1,25 @@
+import {useCallback, useRef} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import CONST from '../CONST';
+
+/**
+ * Focus a text input when a screen is navigated to, after the specified time delay has elapsed.
+ *
+ * @param {Object} inputRef
+ * @param {Number} [delay]
+ */
+export default function useDelayedInputFocus(inputRef, delay = CONST.ANIMATED_TRANSITION) {
+    const timeoutRef = useRef(null);
+
+    useFocusEffect(
+        useCallback(() => {
+            timeoutRef.current = setTimeout(() => inputRef.current && inputRef.current.focus(), delay);
+            return () => {
+                if (!timeoutRef.current) {
+                    return;
+                }
+                clearTimeout(timeoutRef.current);
+            };
+        }, [delay, inputRef]),
+    );
+}

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import React, {useState, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -25,6 +25,7 @@ import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
+import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 import ValuePicker from '../../components/ValuePicker';
 
 const propTypes = {
@@ -154,6 +155,11 @@ function WorkspaceNewRoomPage(props) {
         [translate],
     );
 
+    const roomNameInputRef = useRef(null);
+
+    // use a 600ms delay for delayed focus on the room name input field so that it works consistently on native iOS / Android
+    useDelayedInputFocus(roomNameInputRef, 600);
+
     return (
         <FullPageNotFoundView
             shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
@@ -186,6 +192,7 @@ function WorkspaceNewRoomPage(props) {
                         >
                             <View style={styles.mb5}>
                                 <RoomNameInput
+                                    ref={(el) => (roomNameInputRef.current = el)}
                                     inputID="roomName"
                                     isFocused={props.isFocused}
                                     shouldDelayFocus