[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 contributors@expensify.com 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