[HOLD #11768][$1000] First name, last name not pre-filled on Profile page after login while trying to open that deeplink url reported by @0xmiroslav

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Logout if already logged in
2. Visit https://new.expensify.com/settings/profile
3. Login with any account

Expected Result:

Profile page shows with first name, last name pre-filled

Actual Result:

Profile page shows but first name, last name not populated

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.27-3
Reproducible in staging?: y
**Reproducible in production?:**y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

The issue occurs in Preferred pronouns , timezone settings as well

bug.1.mov

Recording.931.mp4

Expensify/Expensify Issue URL:
Issue reported by: @0xmiroslav
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1668428285770109

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0186654c60152a5d3d
• Upwork Job ID: 1594756326247063552

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[JmillsExpensify]

Re-applied the bug label, as Matt is OOO.

[hungvu193]

Proposal
This is known issue with the TextInput's defaultValue prop, that the defaultValue will not update when the props changed. When we already logged in then navigate to ProfilePage, we already had the user personal detail information needed for the TextInput. But when we redirect it right after logged in like in this issue, it will take some time to load the current user personal detail, that's why even after personal detail information is loaded, we still can't see the defaultValue for TextInput.

Solution
Create a loading indicator while waiting for user personal detail's loaded, so the loading indicator only show if the user personal data's empty.

From 1fa331af3d1a8f30a1d54681ea7ad55adbfdf6ea Mon Sep 17 00:00:00 2001
Date: Wed, 16 Nov 2022 14:45:31 +0700
Subject: [PATCH] fix first name, last name not loaded

---
 src/pages/settings/Profile/ProfilePage.js | 175 +++++++++++-----------
 1 file changed, 89 insertions(+), 86 deletions(-)

diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 84cc1db5d..207e6fdb7 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -29,6 +29,7 @@ import * as ReportUtils from '../../../libs/ReportUtils';
 import Form from '../../../components/Form';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import * as LoginUtils from '../../../libs/LoginUtils';
+import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 
 const loginPropTypes = PropTypes.shape({
     /** Value of partner name */
@@ -239,66 +240,67 @@ class ProfilePage extends Component {
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
                 />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
-                    validate={this.validate}
-                    onSubmit={this.updatePersonalDetails}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <OfflineWithFeedback
-                        pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
-                        errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
-                        errorRowStyles={[styles.mt6]}
-                        onClose={PersonalDetails.clearAvatarErrors}
+                {_.isEmpty(currentUserDetails) ? <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} /> : (
+                    <Form
+                        style={[styles.flexGrow1, styles.ph5]}
+                        formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
+                        validate={this.validate}
+                        onSubmit={this.updatePersonalDetails}
+                        submitButtonText={this.props.translate('common.save')}
+                        enabledWhenOffline
                     >
-                        <AvatarWithImagePicker
-                            isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
-                            avatarURL={currentUserDetails.avatar}
-                            onImageSelected={PersonalDetails.updateAvatar}
-                            onImageRemoved={PersonalDetails.deleteAvatar}
-                            anchorPosition={styles.createMenuPositionProfile}
-                            size={CONST.AVATAR_SIZE.LARGE}
-                        />
-                    </OfflineWithFeedback>
-                    <Text style={[styles.mt6, styles.mb6]}>
-                        {this.props.translate('profilePage.tellUsAboutYourself')}
-                    </Text>
-
-                    <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
-                        <View style={styles.flex1}>
-                            <TextInput
-                                inputID="firstName"
-                                name="fname"
-                                label={this.props.translate('common.firstName')}
-                                defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
-                                placeholder={this.props.translate('profilePage.john')}
+                        <OfflineWithFeedback
+                            pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                            errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
+                            errorRowStyles={[styles.mt6]}
+                            onClose={PersonalDetails.clearAvatarErrors}
+                        >
+                            <AvatarWithImagePicker
+                                isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
+                                avatarURL={currentUserDetails.avatar}
+                                onImageSelected={PersonalDetails.updateAvatar}
+                                onImageRemoved={PersonalDetails.deleteAvatar}
+                                anchorPosition={styles.createMenuPositionProfile}
+                                size={CONST.AVATAR_SIZE.LARGE}
                             />
+                        </OfflineWithFeedback>
+                        <Text style={[styles.mt6, styles.mb6]}>
+                            {this.props.translate('profilePage.tellUsAboutYourself')}
+                        </Text>
+
+                        <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
+                            <View style={styles.flex1}>
+                                <TextInput
+                                    inputID="firstName"
+                                    name="fname"
+                                    label={this.props.translate('common.firstName')}
+                                    defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
+                                    placeholder={this.props.translate('profilePage.john')}
+                                />
+                            </View>
+                            <View style={[styles.flex1, styles.ml2]}>
+                                <TextInput
+                                    inputID="lastName"
+                                    name="lname"
+                                    label={this.props.translate('common.lastName')}
+                                    defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+                                    placeholder={this.props.translate('profilePage.doe')}
+                                />
+                            </View>
                         </View>
-                        <View style={[styles.flex1, styles.ml2]}>
-                            <TextInput
-                                inputID="lastName"
-                                name="lname"
-                                label={this.props.translate('common.lastName')}
-                                defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
-                                placeholder={this.props.translate('profilePage.doe')}
+                        <View style={styles.mb6}>
+                            <Picker
+                                inputID="pronouns"
+                                label={this.props.translate('profilePage.preferredPronouns')}
+                                items={pronounsList}
+                                placeholder={{
+                                    value: '',
+                                    label: this.props.translate('profilePage.selectYourPronouns'),
+                                }}
+                                defaultValue={pronounsPickerValue}
+                                onValueChange={this.setPronouns}
                             />
-                        </View>
-                    </View>
-                    <View style={styles.mb6}>
-                        <Picker
-                            inputID="pronouns"
-                            label={this.props.translate('profilePage.preferredPronouns')}
-                            items={pronounsList}
-                            placeholder={{
-                                value: '',
-                                label: this.props.translate('profilePage.selectYourPronouns'),
-                            }}
-                            defaultValue={pronounsPickerValue}
-                            onValueChange={this.setPronouns}
-                        />
-                        {this.state.hasSelfSelectedPronouns && (
+                            {this.state.hasSelfSelectedPronouns && (
                             <View style={styles.mt2}>
                                 <TextInput
                                     inputID="selfSelectedPronoun"
@@ -306,37 +308,38 @@ class ProfilePage extends Component {
                                     placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
                                 />
                             </View>
-                        )}
-                    </View>
-                    <LoginField
-                        label={this.props.translate('profilePage.emailAddress')}
-                        type="email"
-                        login={this.state.logins.email}
-                        defaultValue={this.state.logins.email}
-                    />
-                    <LoginField
-                        label={this.props.translate('common.phoneNumber')}
-                        type="phone"
-                        login={this.state.logins.phone}
-                        defaultValue={this.state.logins.phone}
-                    />
-                    <View style={styles.mb3}>
-                        <Picker
-                            inputID="timezone"
-                            label={this.props.translate('profilePage.timezone')}
-                            items={timezones}
-                            isDisabled={this.state.isAutomaticTimezone}
-                            value={this.state.selectedTimezone}
-                            onValueChange={selectedTimezone => this.setState({selectedTimezone})}
+                            )}
+                        </View>
+                        <LoginField
+                            label={this.props.translate('profilePage.emailAddress')}
+                            type="email"
+                            login={this.state.logins.email}
+                            defaultValue={this.state.logins.email}
+                        />
+                        <LoginField
+                            label={this.props.translate('common.phoneNumber')}
+                            type="phone"
+                            login={this.state.logins.phone}
+                            defaultValue={this.state.logins.phone}
+                        />
+                        <View style={styles.mb3}>
+                            <Picker
+                                inputID="timezone"
+                                label={this.props.translate('profilePage.timezone')}
+                                items={timezones}
+                                isDisabled={this.state.isAutomaticTimezone}
+                                value={this.state.selectedTimezone}
+                                onValueChange={selectedTimezone => this.setState({selectedTimezone})}
+                            />
+                        </View>
+                        <CheckboxWithLabel
+                            inputID="isAutomaticTimezone"
+                            label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
+                            defaultValue={this.state.isAutomaticTimezone}
+                            onValueChange={this.setAutomaticTimezone}
                         />
-                    </View>
-                    <CheckboxWithLabel
-                        inputID="isAutomaticTimezone"
-                        label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
-                        defaultValue={this.state.isAutomaticTimezone}
-                        onValueChange={this.setAutomaticTimezone}
-                    />
-                </Form>
+                    </Form>
+                )}
             </ScreenWrapper>
         );
     }
-- 
2.31.0

And the result:

Screen.Recording.2022-11-16.at.14.47.03.mov

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[sonialiap]

I can replicate. But not sure if this is an issue that needs fixing or if it's an edge case that won't be encountered often - how often does a user really try to navigate into Expensify via the profile link?

(Neither my name nor my timezone were remembered by the system when I followed the reproduction steps)