Merge pull request #23162 from hoangzinh/df/21523

Fix the cursor position is not at the end of the message when editing the welcome message
Expensify · Jul 24, 2023 · a906877 · a906877
2 parents 2d0547e + 684083f
commit a906877
Showing 1 changed file with 42 additions and 29 deletions.
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
@@ -19,6 +19,7 @@ import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundVi
 import Form from '../components/Form';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import {policyPropTypes, policyDefaultProps} from './workspace/withPolicy';
+import focusAndUpdateMultilineInputRange from '../libs/focusAndUpdateMultilineInputRange';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -59,37 +60,49 @@ function ReportWelcomeMessagePage(props) {
                 if (!welcomeMessageInputRef.current) {
                     return;
                 }
-                welcomeMessageInputRef.current.focus();
+                focusAndUpdateMultilineInputRange(welcomeMessageInputRef.current);
             }}
         >
-            <FullPageNotFoundView shouldShow={!PolicyUtils.isPolicyAdmin(props.policy)}>
-                <HeaderWithBackButton title={props.translate('welcomeMessagePage.welcomeMessage')} />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM}
-                    onSubmit={submitForm}
-                    submitButtonText={props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <Text style={[styles.mb5]}>{props.translate('welcomeMessagePage.explainerText')}</Text>
-                    <View style={[styles.mb6]}>
-                        <TextInput
-                            inputID="welcomeMessage"
-                            label={props.translate('welcomeMessagePage.welcomeMessage')}
-                            accessibilityLabel={props.translate('welcomeMessagePage.welcomeMessage')}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            autoGrowHeight
-                            maxLength={CONST.MAX_COMMENT_LENGTH}
-                            ref={(el) => (welcomeMessageInputRef.current = el)}
-                            value={welcomeMessage}
-                            onChangeText={handleWelcomeMessageChange}
-                            autoCapitalize="none"
-                            textAlignVertical="top"
-                            containerStyles={[styles.autoGrowHeightMultilineInput]}
-                        />
-                    </View>
-                </Form>
-            </FullPageNotFoundView>
+            {({didScreenTransitionEnd}) => (
+                <FullPageNotFoundView shouldShow={!PolicyUtils.isPolicyAdmin(props.policy)}>
+                    <HeaderWithBackButton title={props.translate('welcomeMessagePage.welcomeMessage')} />
+                    <Form
+                        style={[styles.flexGrow1, styles.ph5]}
+                        formID={ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM}
+                        onSubmit={submitForm}
+                        submitButtonText={props.translate('common.save')}
+                        enabledWhenOffline
+                    >
+                        <Text style={[styles.mb5]}>{props.translate('welcomeMessagePage.explainerText')}</Text>
+                        <View style={[styles.mb6]}>
+                            <TextInput
+                                inputID="welcomeMessage"
+                                label={props.translate('welcomeMessagePage.welcomeMessage')}
+                                accessibilityLabel={props.translate('welcomeMessagePage.welcomeMessage')}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                                autoGrowHeight
+                                maxLength={CONST.MAX_COMMENT_LENGTH}
+                                ref={(el) => {
+                                    // Before updating the DOM, React sets the affected ref.current values to null. After updating the DOM, React immediately sets them to the corresponding DOM nodes
+                                    // to avoid focus multiple time, we should early return if el is null.
+                                    if (!el) {
+                                        return;
+                                    }
+                                    if (!welcomeMessageInputRef.current && didScreenTransitionEnd) {
+                                        focusAndUpdateMultilineInputRange(el);
+                                    }
+                                    welcomeMessageInputRef.current = el;
+                                }}
+                                value={welcomeMessage}
+                                onChangeText={handleWelcomeMessageChange}
+                                autoCapitalize="none"
+                                textAlignVertical="top"
+                                containerStyles={[styles.autoGrowHeightMultilineInput]}
+                            />
+                        </View>
+                    </Form>
+                </FullPageNotFoundView>
+            )}
         </ScreenWrapper>
     );
 }