[$250] Profile - Phone number field is not auto focused

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.66-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Login to an account
2. Go to Settings > Profile > Private
3. Click on the Phone number.

Expected Result:

The phone number field is auto-focused.

Actual Result:

The phone number field is not auto-focused. The same behavior with the Legal name and Address pages.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/32c5569b-7850-49bb-9339-b29a96c50efd

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863728672248175424
• Upwork Job ID: 1863728672248175424
• Last Price Increase: 2024-12-02
• Automatic offers:
• paultsimura | Reviewer | 105220383
• NJ-2020 | Contributor | 105220384

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot[bot]]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-11-23 18:08:13 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile - Phone number field is not auto focused

What is the root cause of that problem?

Auto focus is not implemented on relevant inputWrapper on PhoneNumberPage. https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx#L96-L111

What changes do you think we should make in order to solve the problem?

Pass following props here...

                            autoFocus
                            shouldDelayFocus
                            keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                            inputMode={CONST.INPUT_MODE.TEL}

https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx#L96-L111

Explanation for each prop - autoFocus - to focus input field automatically. shouldDelayFocus - On IOS and Android native, focus should be delayed to open keyboard. KeyboardType - pass keyboard type 'number-pad' to show numeric keyboard for phone number input. inputMode - pass inputMode - 'Tel' so that it accepts appropriate value and show related symbols on keyboard(ie. '+').

Additionally we should check on other similar pages and and fix there too.

Results

macOS chrome

https://github.com/user-attachments/assets/6ef040f1-d700-4fb6-8669-88d42742fa71

Android Native

https://github.com/user-attachments/assets/020157ca-30fd-4dbb-bd7d-c44e89bea4c3

IOS Native

https://github.com/user-attachments/assets/2b09ee09-7394-403b-bd45-4e0cf35ca03d

### What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[NJ-2020]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile - Phone number field is not auto focused

What is the root cause of that problem?

We are not focusing the input here https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx#L96-L111

What changes do you think we should make in order to solve the problem?

We can use useAutoFocusInput to focus the input same like what we do here https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/GroupChatNameEditPage.tsx#L110 and here https://github.com/Expensify/App/blob/3ebe8520d74c57a2fe9548b7d4307206e2b7c673/src/pages/iou/request/step/IOURequestStepMerchant.tsx#L136

const {inputCallbackRef} = useAutoFocusInput();

<InputWrapper
    InputComponent={TextInput}
    inputID={INPUT_IDS.PHONE_NUMBER}
    name="lfname"
    label={translate('common.phoneNumber')}
    aria-label={translate('common.phoneNumber')}
    role={CONST.ROLE.PRESENTATION}
    defaultValue={phoneNumber}
    spellCheck={false}
    // inputCallbackRef
    ref={inputCallbackRef}
    onBlur={() => {
        if (!validateLoginError) {
            return;
        }
        PersonalDetails.clearPhoneNumberError();
    }}
/>

What alternative solutions did you explore? (Optional)

[huult]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile - Phone number field is not auto focused

What is the root cause of that problem?

We do not handle autofocus for private profile fields such as phone number, legal name, and address.

Phone number: https://github.com/Expensify/App/blob/e532ef12a3becf621212a64b4dc177ad3fd42a63/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx#L96-L111

Legal name: https://github.com/Expensify/App/blob/44b2f77bf8da76724c22d7e54cc1c220fa6bc798/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx#L101-L110

Address still does not autofocus, but since it uses a different component, we can report and update it later https://github.com/Expensify/App/blob/2c27e6310684fe9cbabf3f1a67291b581be70229/src/components/AddressForm.tsx#L148-L166

What changes do you think we should make in order to solve the problem?

To resolve this, we will add autofocus to enable autofocus and shouldDelayFocus={shouldDelayFocus} to smoothly open the keyboard on Android as props of InputWrapper.

Phone number: https://github.com/Expensify/App/blob/e532ef12a3becf621212a64b4dc177ad3fd42a63/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx#L96-L111

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

Legal name: https://github.com/Expensify/App/blob/44b2f77bf8da76724c22d7e54cc1c220fa6bc798/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx#L101-L110

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

POC

https://github.com/user-attachments/assets/292db358-735a-4bde-8063-f82d33c24ab3

What alternative solutions did you explore? (Optional)

Single input: we need to add.

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

to InputWrapper of

PhoneNumberPage.tsx

Multi-input: If we want to auto-focus the first input, then add it.

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

to InputWrapper first of

DisplayNamePage.tsx
LegalNamePage.tsx
Address.tsx

Or, if we don't want to auto-focus, then no update is needed

DisplayNamePage.tsx
LegalNamePage.tsx
Address.tsx

[ChavdaSachin]

Updated Proposal Improved solution, added results.

[melvin-bot[bot]]

@strepanier03 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

@strepanier03 Eep! 4 days overdue now. Issues have feelings too...

[strepanier03]

When I test this none of the fields are focused, phone number, full name, or address. It looks as if the DOB field is focused but you can't type anything in it. This was with a new account in MacOS/Chrome.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021863728672248175424

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @paultsimura (External)

[strepanier03]

@paultsimura - Can you test this and confirm if any of the fields are auto-focused when you do? The OP is for the phone number field, which I agree is no auto-focused during my testing, but the other fields are not either.

[paultsimura]

@strepanier03 some of the profile fields are autofocused (status, pronouns) while others are not (phone, display name, legal name, address).

https://github.com/user-attachments/assets/d9e1f974-eab1-40b0-a223-44f0e2843de6

My educated guess would be to autofocus only on the pages that has a single input field (display name, pronouns, phone number, status). Autofocusing on multi-field inputs might be a bad UX because the keyboard will cover other fields, and the user might want to correct some of the bottom fields while it autofocus on the tope one.

We might want involve @Expensify/design to clarify the UX. Or count on your and/or assigned engineer's opinion.

[dubielzyk-expensify]

My educated guess would be to autofocus only on the pages that has a single input field (display name, pronouns, phone number, status). Autofocusing on multi-field inputs might be a bad UX because the keyboard will cover other fields, and the user might want to correct some of the bottom fields while it autofocus on the tope one.

I like this principle. I also think it depends if its filled or not as well. So if a name field is empty it still probably make sense to autofocus the first input field. Still think we'll mostly have to do it on a case per case basis, but for phone number I think we should autofocus. Keen to hear what the rest of @Expensify/design team thinks

[ys-sherzad]

@strepanier03 @paultsimura Incorporating autoFocus appears to be functioning as expected, and shouldDelayFocus is also working correctly!

Chrome (Android emulator - S22 api 35)

https://github.com/user-attachments/assets/a0d6cd2e-b53f-4ae9-ba64-b70f7afdcedf

Safari (MacOS M1)

https://github.com/user-attachments/assets/1b65399a-1f8a-4c9f-a4cd-5fe5b6d0672d

Chrome (MacOS M1)

https://github.com/user-attachments/assets/2a2a1145-3a46-442e-bcd3-06700a5285f8

[melvin-bot[bot]]

📣 @ys-sherzad! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[paultsimura]

I also think it depends if its filled or not as well

That's a good point. What should we do if there's a single-input field, and it's already filled? e.g., if the phone number is already provided, should we autofocus on it?

[dannymcclain]

I kinda think we should always auto-focus when there's only one input on the screen—regardless of whether or not it's filled.

For the multi-input case, I would rather stick to one behavior and not change the behavior based on whether inputs are filled or not. I think auto-focusing the first input or not auto-focusing any would probably be fine. I think I lean ever so slightly to not auto-focusing at all when there are multiple inputs. Definitely open to have my mind changed though.

[strepanier03]

I think the behavior described by @dannymcclain sounds solid and I agree with it as my preferred behavior as well.

[dubielzyk-expensify]

Agree that what Danny outlines sounds simpler 👍 Dig it.

[huult]

Proposal updated

• Update alternative solution for the profile page.

[paultsimura]

Thanks y'all, reviewing soon 👀

[paultsimura]

Thanks for the proposals. Solutions by @huult and @ChavdaSachin are quite similar – they suggest using the combination of autoFocus and shouldDelayFocus props. Unfortunately, this approach has downsides, such as not focusing the field when navigating back to the page. Similar issue here: https://github.com/Expensify/App/issues/33173

Reproduction steps:

• Open the "Edit phone number" page
• Enter CMD+J to open the list of shortcuts
• Navigate back to the "Edit phone number" page
• The field will not be focused

The proposal by @NJ-2020 is the one I'd like to proceed with. Please make sure we cover what's been decided here.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @mjasikowski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mjasikowski]

Let's go @NJ-2020!

[melvin-bot[bot]]

📣 @paultsimura 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @NJ-2020 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot[bot]]

@mjasikowski @strepanier03 @paultsimura @NJ-2020 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[paultsimura]

Chill Melvin, we're doing our best 🙂

[paultsimura]

Hey @NJ-2020, do you have any estimations on the PR readiness?

[NJ-2020]

Hi, I am very sorry. I am OOO now for few days. i am currently mourning my father who has passed away yesterday.

Thanks

cc: @paultsimura