[PAID] [$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
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6673771_1732326370020.23.11.2024_04.31.34_REC.mp4

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: @strepanier03

[melvin-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.

App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines 96 to 111 in 3ebe852

	<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}
	onBlur={() => {
	if (!validateLoginError) {
	return;
	}
	PersonalDetails.clearPhoneNumberError();
	}}
	/>

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}

App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines 96 to 111 in 3ebe852

	<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}
	onBlur={() => {
	if (!validateLoginError) {
	return;
	}
	PersonalDetails.clearPhoneNumberError();
	}}
	/>

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

Screen.Recording.2024-11-25.at.7.06.48.PM.mov

Android Native

Screen.Recording.2024-11-25.at.10.58.02.PM.mov

IOS Native

Screen.Recording.2024-11-25.at.11.13.18.PM.mov

### 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

App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines 96 to 111 in 3ebe852

	<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}
	onBlur={() => {
	if (!validateLoginError) {
	return;
	}
	PersonalDetails.clearPhoneNumberError();
	}}
	/>

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

App/src/pages/GroupChatNameEditPage.tsx

Line 110 in 3ebe852

ref={inputCallbackRef}

and here

App/src/pages/iou/request/step/IOURequestStepMerchant.tsx

Line 136 in 3ebe852

ref={inputCallbackRef}

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:

App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines 96 to 111 in e532ef1

	<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}
	onBlur={() => {
	if (!validateLoginError) {
	return;
	}
	PersonalDetails.clearPhoneNumberError();
	}}
	/>

Legal name:

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

Lines 101 to 110 in 44b2f77

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.LEGAL_FIRST_NAME}
	name="lfname"
	label={translate('privatePersonalDetails.legalFirstName')}
	aria-label={translate('privatePersonalDetails.legalFirstName')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={legalFirstName}
	spellCheck={false}
	/>

Address still does not autofocus, but since it uses a different component, we can report and update it later

App/src/components/AddressForm.tsx

Lines 148 to 166 in 2c27e63

	<InputWrapper
	InputComponent={AddressSearch}
	inputID={INPUT_IDS.ADDRESS_LINE_1}
	label={translate('common.addressLine', {lineNumber: 1})}
	onValueChange={(data: unknown, key: unknown) => {
	onAddressChanged(data, key);
	}}
	defaultValue={street1}
	renamedInputKeys={{
	street: INPUT_IDS.ADDRESS_LINE_1,
	street2: INPUT_IDS.ADDRESS_LINE_2,
	city: INPUT_IDS.CITY,
	state: INPUT_IDS.STATE,
	zipCode: INPUT_IDS.ZIP_POST_CODE,
	country: INPUT_IDS.COUNTRY as Country,
	}}
	maxInputLength={CONST.FORM_CHARACTER_LIMIT}
	shouldSaveDraft={shouldSaveDraft}
	/>

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:

App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines 96 to 111 in e532ef1

	<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}
	onBlur={() => {
	if (!validateLoginError) {
	return;
	}
	PersonalDetails.clearPhoneNumberError();
	}}
	/>

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

Legal name:

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

Lines 101 to 110 in 44b2f77

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.LEGAL_FIRST_NAME}
	name="lfname"
	label={translate('privatePersonalDetails.legalFirstName')}
	aria-label={translate('privatePersonalDetails.legalFirstName')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={legalFirstName}
	spellCheck={false}
	/>

      autoFocus
      shouldDelayFocus={shouldDelayFocus}

POC

Screen.Recording.2024-11-24.at.22.18.28.mov

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]

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

[melvin-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]

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

[melvin-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).

trim.FD841BA8-9A06-444A-B3A9-58E4B0C07F79.MOV

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)

Screen.Recording.2024-12-03.at.12.21.56.AM.mov

Safari (MacOS M1)

Screen.Recording.2024-12-03.at.12.27.21.AM.mov

Chrome (MacOS M1)

Screen.Recording.2024-12-03.at.12.26.25.AM.mov

[melvin-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]

I am facing IOS(native) build error

Can you proceed with the PR without an iOS build for now?

[melvin-bot]

@mjasikowski @strepanier03 @paultsimura @NJ-2020 this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[NJ-2020]

PR will be ready today

[NJ-2020]

PR ready

cc: @paultsimura

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.81-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• phone number field is not auto focused #54447

If no regressions arise, payment will be issued on 2025-01-15. 🎊

For reference, here are some details about the assignees on this issue:

• @paultsimura requires payment automatic offer (Reviewer)
• @NJ-2020 requires payment automatic offer (Contributor)

[melvin-bot]

@paultsimura @strepanier03 @paultsimura The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[paultsimura]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/50773/files#r1914410568

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Test:

1. Login to any account
2. Go to Settings > Profile > Private
3. Click on the "Phone number" menu.
4. Make sure the phone number field is auto-focused

Do we agree 👍 or 👎

[paultsimura]

@mallenexpensify, you once were wondering why I'm mentioned twice. Now it happens on almost every issue 🙂

• [PAID] [$250] Profile - Phone number field is not auto focused #53030 (comment)
• [HOLD for payment 2025-01-17] [$250] Page not scroll down when hold and unhold expense #54580 (comment)

[mallenexpensify]

@paultsimura , bizarre. I thought you might have been double-added somewhere but I only see one of you on the C+ team in GH

Unsure what other list or db the auto-post would be referencing that'd double up your handle in posts. ¯_(ツ)_/¯

[strepanier03]

Payment Summary

• $250 - @paultsimura via Upwork automatic offer (Reviewer)
• $250 - @NJ-2020 via Upwork automatic offer (Contributor)