[HOLD for payment 2025-02-06] [$250] Console error on new chat confirmation screen

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @allroundexperts
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Click on + and select new chat.
2. Enter a couple of emails, and add them to the group.
3. Click Next.
4. Remove one of the member.

Expected Result:

Member removed and No console error

Actual Result:

Console error stating that function components can not be passed refs

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881459118214724252
• Upwork Job ID: 1881459118214724252
• Last Price Increase: 2025-01-20

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

Triggered auto assignment to @slafortune (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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[bernhardoj]

Proposal

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

Console error on the new group confirm page.

What is the root cause of that problem?

The error comes from AvatarWithImagePicker component. The component is wrapped with withNavigationFocus HOC. The HOC pass a ref to the wrapped component

App/src/components/withNavigationFocus.tsx

Lines 15 to 19 in 5133090

	return (
	<WrappedComponent
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...(props as TProps)}
	ref={ref}

but the AvatarWithImagePicker doesn't forward it using forwardRef.

App/src/components/AvatarWithImagePicker.tsx

Line 469 in 5133090

export default withNavigationFocus(AvatarWithImagePicker);

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

withNavigationFocus only have usages left on 2 files. Instead of using the HOC, we can just use the useIsFocused hook. So, I'm suggesting to delete the HOC and replace it with useIsFocused hook on AvatarWithImagePicker and AppleSignIn/index.tsx.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[shubham1206agra]

Can repro. Please assign me C+ as per https://expensify.slack.com/archives/C02NK2DQWUX/p1736978752708209

[allroundexperts]

@shubham1206agra But I posted this bug, and was able to reproduce.

[shubham1206agra]

I am not sure, but I followed the rules. So, I should be C+ here

[melvin-bot]

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

[melvin-bot]

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

[slafortune]

@shubham1206agra It seems that the tag "Needs Reproductions" was added incorrectly.

[allroundexperts]

@bernhardoj's proposal is spot on. Let's go with them.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[bernhardoj]

PR is ready

cc: @allroundexperts

[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.91-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix console error on group confirmation page #55648

If no regressions arise, payment will be issued on 2025-02-06. 🎊

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

• @allroundexperts requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests
• @allroundexperts requires payment through NewDot Manual Requests

[melvin-bot]

@allroundexperts @slafortune @allroundexperts 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]

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @allroundexperts owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@slafortune)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1881459118214724252/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[slafortune]

Role C+ @allroundexperts owed $250 via NewDot
Role Contributor - @bernhardoj owed $250 via NewDot

[bernhardoj]

Requested in ND.