[$250] Web - IOU - Report fields are not auto focused

[kbecciv]

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: 1.4.61-0
Reproducible in staging?: y
Reproducible in production?: n
Issue found when executing PR: #36039
Issue reported by: Applause - Internal Team

Action Performed:

Preconditions:

• A collect WS created in OD with chat enabled
• A few report fields are added

1. Navigate to staging.new.expensify.com
2. Open WS chat and create a money request
3. Open the expense conversation of the IOU created on step 2
4. Click on a report field

Expected Result:

The input field should be auto focused when RHP opens

Actual Result:

The input field does not get auto focused

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6442348_1712584537394.bandicam_2024-04-08_16-51-07-015.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0170f515ec872826bb
• Upwork Job ID: 1777440709498458112
• Last Price Increase: 2024-04-08
• Automatic offers:
• GandalfGwaihir | Contributor | 0

[melvin-bot]

Triggered auto assignment to @marcochavezf (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[mountiny]

This is a minor UX issue which we do not have to hold deploy for

cc @allroundexperts @thienlnam

[melvin-bot]

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

[allroundexperts]

Agreed. I can be the C+ here if this needs to go external.

[allgandalf]

Proposal

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

Input field is not autofocused

What is the root cause of that problem?

We use AnimatedTextInputRef for fieldText, this doesn't autofocus

App/src/pages/EditReportFieldText.tsx

Line 33 in 1b6c993

const inputRef = useRef<AnimatedTextInputRef>(null);

We do not autofocus in InputWrapper

App/src/pages/EditReportFieldText.tsx

Lines 56 to 65 in 1b6c993

	<InputWrapper
	InputComponent={TextInput}
	inputID={fieldKey}
	name={fieldKey}
	defaultValue={fieldValue}
	label={fieldName}
	accessibilityLabel={fieldName}
	role={CONST.ROLE.PRESENTATION}
	ref={inputRef}
	/>

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

We need to use useAutoFocusInput assign it to a value inputCallbackRef and pass it to prop ref in InputWrapper, we do the same for merchant:

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

Line 77 in 1b6c993

const {inputCallbackRef} = useAutoFocusInput();

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

Line 159 in 1b6c993

ref={inputCallbackRef}

What alternative solutions did you explore? (Optional)

N/A

[marcochavezf]

Assigning you @allroundexperts as C+ and making it external

[melvin-bot]

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

[melvin-bot]

Current assignee @allroundexperts is eligible for the External assigner, not assigning anyone new.

[allroundexperts]

@GandalfGwaihir's proposal looks straight forward to me. Let's go with them!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @marcochavezf is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[marcochavezf]

Thanks for the review @allroundexperts, assigning @GandalfGwaihir 🚀

[melvin-bot]

📣 @GandalfGwaihir 🎉 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 📖

[allgandalf]

This hit production yesterday, automation failed, can you update the title manually @kevinksullivan

[allgandalf]

this is due payment @kevinksullivan :)

[kevinksullivan]

Payment summary:

• @GandalfGwaihir $250
• @allroundexperts $250

Thanks everyone!

[JmillsExpensify]

$250 approved for @allroundexperts