[HOLD for payment 2024-02-09] [$500] mWEb/Safari - Chat - Header not anchored at top in conversation when compose box is focused

[lanitochka17]

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: .1.3.45-0
Reproducible in staging?: Y
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): applausetester+1117ck@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Tap on FAB button >> Start Chat option
2. Start 1:1 DM with several messages already between users
3. Send messages (Note: Header section anchored at top)
4. Tap back button to go to LHN
5. Tap FAB button >> Start Chat with same user
6. Click in composer (Note : Header not anchored at top)

Expected Result:

Header should be anchored at top in conversation when compose box is focused

Actual Result:

Header not anchored at top in conversation when compose box is focused

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6364031_1706818525652.Video2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dd20f281b9038937
• Upwork Job ID: 1753198333098303488
• Last Price Increase: 2024-02-01
• Automatic offers:
• situchan | Reviewer | 28135933
• mkhutornyi | Contributor | 28135934

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

[melvin-bot]

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

[lanitochka17]

Production:

Bug6364031_1706818525640.RPReplay_Final1706811929.2.mp4

[francoisl]

Possibly the same root cause as #35593

[melvin-bot]

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

[melvin-bot]

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

[mkhutornyi]

Proposal

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

mSafari - chat header is not sticked to the top when composer is focused and keyboard is shown

What is the root cause of that problem?

We already have logic of setting header offset when keyboard is shown. This was done by wrapping ReportScreen with withViewportOffsetTop HOC.
So when keyboard is shown, viewportOffsetTop prop value changes.
The root cause is that ReportScreen doesn't get re-rendered whenever this value changes because of memoization here:

App/src/pages/home/ReportScreen.js

Lines 649 to 669 in 02d8a0a

	memo(
	ReportScreen,
	(prevProps, nextProps) =>
	prevProps.isSidebarLoaded === nextProps.isSidebarLoaded &&
	_.isEqual(prevProps.reportActions, nextProps.reportActions) &&
	_.isEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
	prevProps.isComposerFullSize === nextProps.isComposerFullSize &&
	_.isEqual(prevProps.betas, nextProps.betas) &&
	_.isEqual(prevProps.policies, nextProps.policies) &&
	prevProps.accountManagerReportID === nextProps.accountManagerReportID &&
	prevProps.userLeavingStatus === nextProps.userLeavingStatus &&
	prevProps.report.reportID === nextProps.report.reportID &&
	prevProps.report.policyID === nextProps.report.policyID &&
	prevProps.report.managerID === nextProps.report.managerID &&
	prevProps.report.isOptimisticReport === nextProps.report.isOptimisticReport &&
	prevProps.report.statusNum === nextProps.report.statusNum &&
	_.isEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) &&
	prevProps.currentReportID === nextProps.currentReportID &&
	prevProps.report.notificationPreference === nextProps.report.notificationPreference &&
	prevProps.report.isPinned === nextProps.report.isPinned &&
	prevProps.report.chatReportID === nextProps.report.chatReportID,

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

Add prevProps.viewportOffsetTop === nextProps.viewportOffsetTop && to this memo condition

[mkhutornyi]

I confirmed that my solution also fixes #35593 as the same root cause

[situchan]

@mkhutornyi's proposal looks good to me
cc: @francoisl
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @srikarparsi is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[francoisl]

Sweet, let's go with that. Are you able to work on a PR now @mkhutornyi?

[melvin-bot]

📣 @situchan 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

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

[mkhutornyi]

sure, raising PR shortly

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

• [CP Staging] fix chat header not anchored at top when composer is focused #35619

If no regressions arise, payment will be issued on 2024-02-09. 🎊

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

• @mkhutornyi requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Reviewer)

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @CortneyOfstad you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[CortneyOfstad]

No regressions listed, so getting this payment completed now 👍

In the meantime, @situchan does this require a regression test? I don't think so, but wanted to confirm. Thanks!

[situchan]

@CortneyOfstad correct, no need. This was deploy blocker (caught during staging regression testing) so this test case already exists

[CortneyOfstad]

Payment Summary

@mkhutornyi (contributor) — paid $500 via Upwork
@situchan (C+) — paid $500 via Upwork