[HOLD for payment 2023-10-02] [HOLD for payment 2023-09-29] [$500] Dev: Web - App crashing on creating new workspace

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Login with new account
2. Click on FAB > New workspace
3. App crashes

Expected Result:

App should not crash and workspace is created

Actual Result:

App crashes and a console error is present

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.71-6
Reproducible in staging?: n
Reproducible in production?: n
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
Notes/Photos/Videos: Any additional supporting documentation

app-crashes.mp4

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695116344613649

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016db5c84825401ac4
• Upwork Job ID: 1704127946717769728
• Last Price Increase: 2023-09-19

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @muttmuure (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ArekChr (External)

[jeet-dhandha]

Proposal

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

• Web app crashing when creating new workspace from FAB.

What is the root cause of that problem?

• hideReactionList is not defined as its called before the ref could by the parent ref before the innerRef was set.

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

• We can add checks to see if ref and hideReactionList is defined before calling it.

App/src/pages/home/report/ReactionList/PopoverReactionList/index.js

Lines 32 to 34 in 778f763

	const hideReactionList = () => {
	innerReactionListRef.current.hideReactionList();
	};

if (!innerReactionListRef.current || !innerReactionListRef.current.hideReactionList) {
    return;
}

What alternative solutions did you explore? (Optional)

[Pujan92]

Seems a regression from #27268 as for me while navigating back from profile crashes the app

[PiyushChandra17]

Proposal

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

Web - App crashing on creating new workspace

What is the root cause of that problem?

hideReactionList is not defined, need to check initialization first

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

We need to check this condition first:
if (innerReactionListRef.current && innerReactionListRef.current.hideReactionList) {

here,

App/src/pages/home/report/ReactionList/PopoverReactionList/index.js

Lines 32 to 34 in 12dbce8

	const hideReactionList = () => {
	innerReactionListRef.current.hideReactionList();
	};

if (innerReactionListRef.current && innerReactionListRef.current.hideReactionList) {
            innerReactionListRef.current.hideReactionList();
        }

What alternative solutions did you explore? (Optional)

NA

[saranshbalyan-1234]

Proposal

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

Web app crashing while creating a new workspace.

What is the root cause of that problem?

useImperativeHandle is called in which hideReactionList is used which ultimately uses the ref passed to child component. This is called before rendering of the child component which results in error.

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

We need to return is the ref current is either undefined or null here

App/src/pages/home/report/ReactionList/PopoverReactionList/index.js

Lines 32 to 36 in e18ec42

	const hideReactionList = () => {
	innerReactionListRef.current.hideReactionList();
	};
	/**

to this

const hideReactionList = () => {
        if (!innerReactionListRef.current) return;
        innerReactionListRef.current.hideReactionList();
    };

Also while using useImperativeHandle, we need to pass the dependency array with the arguments that are being used.

    useImperativeHandle(props.innerRef, () => ({showReactionList, hideReactionList, isActiveReportAction}), [innerReactionListRef.current]);

What alternative solutions did you explore? (Optional)

N/A

[ArekChr]

We can close this issue. It has been fixed in #27798

[mountiny]

This isn now repro in production, merged the fix into main, going to ask for a CP

[OSBotify]

👋 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.

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

• [CP Staging] revert: "fix: 26178 Context menu does not close after user goes to the previous page" #27798

If no regressions arise, payment will be issued on 2023-09-29. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @ArekChr does not require payment (Contractor)
• @aman-atg requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.73-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] revert: "fix: 26178 Context menu does not close after user goes to the previous page" #27798

If no regressions arise, payment will be issued on 2023-10-02. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @ArekChr does not require payment (Contractor)
• @aman-atg requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

@ArekChr, @mountiny, @muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@ArekChr, @mountiny, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[mountiny]

@muttmuure Can you please handle the payment of $50 here and then we can close

[muttmuure]

Invite sent to @aman-atg

[aman-atg]

@muttmuure Submitted the proposal on Upwork

[melvin-bot]

@ArekChr, @mountiny, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[muttmuure]

Handling

[muttmuure]

Offer sent

[melvin-bot]

@ArekChr, @mountiny, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[muttmuure]

Paid!