[Due for payment 2025-04-10] [Due for payment 2025-04-08] [$250] Start chat - Start chat page is broken after refreshing the page

[jponikarchuk]

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: 9.1.21-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Other

Action Performed:

Precondition:

• Browser is Mac Chrome.
• Expensify desktop app is installed.

1. Go to staging.new.expensify.com
2. Create a workspace if there isn't one.
3. Open FAB > Start chat > Chat.
4. Refresh the page.
5. Do not interact with "Open New Expensify" modal first.

Expected Result:

Start chat page will open Chat page.

Actual Result:

Start chat page opens Room page. The tabs disappear. "Description" label input overlaps with the entered text.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6784750_1743110346795.Dvnb8264_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021906720830415317384
• Upwork Job ID: 1906720830415317384
• Last Price Increase: 2025-03-31
• Automatic offers:
• brunovjk | Reviewer | 106732122
• nkdengineer | Contributor | 106732123

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[JS00001]

I'm able to repro in staging, looking into it

[JS00001]

This looks like the exact same bug as #59223 (comment), which had its fix reverted, I don't think this is a deploy blocker

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-31 14:01:30 UTC.

Proposal

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

Start chat page opens Room page. The tabs disappear. "Description" label input overlaps with the entered text.

What is the root cause of that problem?

It comes from #59156

isSidePaneTransitionEnded has the default value is true then, the input can be focused immediately while the transition isn't completed because isScreenTransitionEnded is updated to true. In this case, the transition from OnyxTabNavigator breaks and the bug appears.

App/src/hooks/useSidePane.ts

Line 59 in 045a3ba

const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true);

App/src/hooks/useAutoFocusInput.ts

Line 64 in 045a3ba

setIsScreenTransitionEnded(isSidePaneTransitionEnded);

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Line 270 in 045a3ba

ref={inputCallbackRef}

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

We should change the default value to false like we did here for useAutoFocusInput

App/src/hooks/useSidePane.ts

Line 59 in 045a3ba

const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true);

We also should only update isScreenTransitionEnded if shouldHideSidePane is changed

const prevShouldHideSidePane = usePrevious(shouldHideSidePane);
useEffect(() => {
    if (!shouldHideSidePane || prevShouldHideSidePane) {
        return;
    }

    setIsScreenTransitionEnded(isSidePaneTransitionEnded);
}, [isSidePaneTransitionEnded, shouldHideSidePane, prevShouldHideSidePane]);

App/src/hooks/useAutoFocusInput.ts

Line 64 in 045a3ba

setIsScreenTransitionEnded(isSidePaneTransitionEnded);

Optional: Since we already use shouldDelayFocus and autoFocus prop, we can remove inputCallbackRef to prevent multiple focus can trigger.

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Lines 270 to 277 in 045a3ba

	ref={inputCallbackRef}
	inputID={INPUT_IDS.ROOM_NAME}
	isFocused={isFocused}
	shouldDelayFocus
	autoFocus
	/>
	</View>
	<View style={styles.mb5}>

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

@JS00001 It's a blocker, another change caused this now.

[brunovjk]

I reviewed the PR, can we assign me as C+ here? Thanks.

[blazejkustra]

We should change the default value to false like we did here for useAutoFocusInput

const [isSidePaneTransitionEnded, setIsSidePaneTransitionEnded] = useState(true);

@brunovjk if this fixes it, I think this is way to go!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

@brunovjk The PR is ready for review.

[brunovjk]

PR on staging. Should we CP @mountiny ?

[mountiny]

its going there

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

• [CP Staging] fix: start chat page is broken after refreshing the page #59378

If no regressions arise, payment will be issued on 2025-04-08. 🎊

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

• @brunovjk requires payment automatic offer (Reviewer)
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

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

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

• [CP Staging] fix: start chat page is broken after refreshing the page #59378

If no regressions arise, payment will be issued on 2025-04-10. 🎊

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

• @brunovjk requires payment automatic offer (Reviewer)
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

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

[brunovjk]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: Fix auto focus after side pane is closed, fix popover position on attachment modal #59156 (comment)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

Precondition:

• Desktop app is installed

1. Create a workspace if we don't have
2. Open FAB > Start chat
3. Refresh the page
4. Verify that the start chat page isn't broken

Do we agree 👍 or 👎

[stephanieelliott]

Summarizing payment on this issue:

• Contributor: @brunovjk $250 via Upwork - PAID!
• Contributor+: @nkdengineer $250 via Upwork - PAID!

Upwork job is here: https://www.upwork.com/jobs/~021906720830415317384

[stephanieelliott]

Testrail case is here: https://github.com/Expensify/Expensify/issues/489079