Profile - Phone number field is not auto focused

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com 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): gibethlehem@gmail.com
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

[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?

autoFocus prop is not passed 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?

Pass autoFocus prop 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();
	}}
	/>

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

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)