[$250] Task - App scrolls to the top after returning from task report when there is IOU & task

[izarutskaya]

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: 1.4.62-0 Reproducible in staging?: Y Reproducible in production?: N Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Create a new chat (no chat history).
3. Create an IOU request.
4. Create a task.
5. Click on the task.
6. Click on the header subtitle in task report.

Expected Result:

App will adjust the chat to show the highlighted task.

Actual Result:

App scrolls up to the top and it is not revealing the task.

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/115492554/09784a92-859c-4f92-9514-c6c2474d1927

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d7000bd5e3685039
• Upwork Job ID: 1778383845658161152
• Last Price Increase: 2024-04-11

[melvin-bot[bot]]

Triggered auto assignment to @lschurr (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[bot]]

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

[github-actions[bot]]

:wave: 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.

[izarutskaya]

@lschurr I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

https://github.com/Expensify/App/assets/115492554/ac71c808-3fe7-48a0-8eb8-6e74f2f1439a

[techievivek]

Taking a look.

[techievivek]

Ok, I am able to reproduce this bug. Seems like we have updated the URL signature when we click on the link in task view page.

[techievivek]

It now has reportActionID as well?

[techievivek]

I think we can remove the deploy blocker label from this since it doesn't look valuable to hold our deployment. However, this is indeed a regression from some recent changes. Maybe https://github.com/Expensify/App/pull/13767?

[techievivek]

Going to add external label.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[MingyangJin]

Proposal

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

The problem is the scrolling logic of report Item is not correct in certain cases such as when it's linked from an action item.

What is the root cause of that problem?

The logic here (line 313) is incorrectly return instead of scrolling to the desired item https://github.com/Expensify/App/blob/fa2bfb29dbcdc84c369c77cfcadda0a8a7a577e7/src/pages/home/report/ReportActionsList.tsx#L311-L319

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

We should find the matched item (if there's any) so that it's automatically scrolled to the matched item. https://github.com/Expensify/App/blob/fa2bfb29dbcdc84c369c77cfcadda0a8a7a577e7/src/pages/home/report/ReportActionsList.tsx#L311-L319

What alternative solutions did you explore? (Optional)

N/A 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.

[melvin-bot[bot]]

📣 @MingyangJin! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot[bot]]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[melvin-bot[bot]]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[MingyangJin]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~0180847d570f9ce9d4

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[shahinyan11]

Proposal

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

Task - App scrolls to the top after returning from task report when there is IOU & task

What is the root cause of that problem?

Lets call the new chat report as A and the task кузщке as B. When we navigate to B report from A the A report does not removed from navigation stack and continues re-render related updating Onyx. Especially for report A, the reportActions will be updated and all actions except the task action will be removed. And then when going back there is only a task action, and other report actions are added later and this leads to current behavior

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

Updating this condition as follows if (!sortedAllReportActions.length || !isFocused) will solve the problem

What alternative solutions did you explore? (Optional)

[QichenZhu]

Proposal

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

After returning from a task report, the app sometimes scrolls to the top if the task was positioned at the bottom.

What is the root cause of that problem?

The prepareForMaintainVisibleContentPosition function fails to identify the task as the first visible subview when it's positioned at the bottom of the scroll view, in which circumstance both the subviewOffset and scrollOffset are 0 or the same value.

https://github.com/Expensify/App/blob/0665fa4fc6f9edc70c91728277374de7021b49a4/src/components/FlatList/index.tsx#L80-L85

As a result, the function mistakenly considers the next subview ($footer) as the first visible subview.

Consequently, the adjustForMaintainVisibleContentPosition function adjusts the scroll offset based on $footer. However, $footer is an improper reference for this adjustment.

https://github.com/Expensify/App/blob/0665fa4fc6f9edc70c91728277374de7021b49a4/src/components/FlatList/index.tsx#L103-L107

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

To handle cases where subviewOffset == scrollOffset, a possible fix is changing the operator in the prepareForMaintainVisibleContentPosition function from > to >=. I have tested it locally.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot[bot]]

📣 @QichenZhu! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[QichenZhu]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~0179e125e16ec756de

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[lschurr]

Looks like we have some proposals that need review. Can you take care of that @shubham1206agra?

[shubham1206agra]

@shahinyan11 Can you tell me what do you want to update?

[shahinyan11]

@shahinyan11 Can you tell me what do you want to update?

@shubham1206agra Oh I am sorry. I updated proposal and added the change that I would introduce

[QichenZhu]

It seems that this bug isn't reproducible on the latest main branch. However, the underlying cause of the bug I mentioned in my proposal still exists. Although it no longer causes the screen to scroll to the top, it now causes the screen to scroll to the second last message after hovering the mouse over it.

https://github.com/Expensify/App/assets/57348009/76d46881-9938-45d6-87ed-1f1737624f56

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[lschurr]

Can you take another look @shubham1206agra?