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

@allroundexperts

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:

Click on + and select new chat.
Enter a couple of emails, and add them to the group.
Click Next.
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?

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

@slafortune

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.

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

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

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

@shubham1206agra

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

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

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

@allroundexperts

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

@allroundexperts

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

@allroundexperts

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

@allroundexperts

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

Requested in ND.

@bernhardoj

$250 approved for @bernhardoj

@allroundexperts

$250 approved for @allroundexperts

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

21 remaining items

Payment Summary

BugZero Checklist (@slafortune)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 15, 2025

MelvinBot commented on Jan 15, 2025

bernhardoj commented on Jan 16, 2025

Proposal

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

What is the root cause of that problem?

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

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

shubham1206agra commented on Jan 16, 2025

allroundexperts commented on Jan 16, 2025

shubham1206agra commented on Jan 16, 2025

21 remaining items

melvin-bot commented on Jan 30, 2025

melvin-bot commented on Jan 30, 2025

melvin-bot commented on Jan 30, 2025

melvin-bot commented on Feb 6, 2025

Payment Summary

BugZero Checklist (@slafortune)

slafortune commented on Feb 6, 2025

bernhardoj commented on Feb 7, 2025

JmillsExpensify commented on Feb 10, 2025

JmillsExpensify commented on Jun 13, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions