When reaching the bottom of the emoji list user is taken back to the top of the Flags section

[isagoico]

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

---

Expected Result:

When scrolling to the bottom, emoji list should stay on the same place.

Actual Result:

After reaching the bottom of the page if the user keeps scrolling the list is redirected back to the top of the flags section.

Action Performed:

1. Navigate to https://staging.expensify.cash/
2. Select any user and initiate chat
3. In the text input field select emoji
4. Search for "flag" in search field
5. Scroll to the end

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web ✔️

Version Number: 1.0.49-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5076512_mWeb_flags.mp4

Expensify/Expensify Issue URL:

Upwork Job URL: https://www.upwork.com/jobs/~017cbd904460423141

View all open jobs on Upwork

[MelvinBot]

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

[muttmuure]

reproduced following steps adding engineering label

[MelvinBot]

Triggered auto assignment to @chiragsalian (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[isagoico]

Issue reproducible during today's KI retests..

[MelvinBot]

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

[NicMendonca]

Posted to Upwork: https://www.upwork.com/jobs/~017cbd904460423141

[isagoico]

Issue reproducible today during KI retests

[NicMendonca]

Raised the price for this job to $500.

[parasharrajat]

Proposal

What/where is the issue?

1. It's not a logical bug instead of a performance(didn't know any other term 🤣 ) issue. Here https://github.com/Expensify/Expensify.cash/blob/2345457326b7c35101b2704b9b9f135325bb7d7c/src/pages/home/report/EmojiPickerMenu/index.js#L338.
   This onScroll updates the state on each frame. There will be many in the case of the scroll. Which is the culprit, it somehow causes the scroll bug.

Solution

1. I didn't see any action where we want to react to the Scroll event instead we just want to save the scroll offset. Which could be simplified as

onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}

and then we can replace all the this.state.currentScrollOffset instances to this.currentScrollOffset. It will have the same effect(I tested it) as before but without the state change.

This fixes the bug.

Not sure why video is corrupted. Please download it and watch it on your device.

scroll.bug.mp4

Test performed

1. Using console check the scroll offset.
2. Performed arrow navigation multiple times in all directions.

[chiragsalian]

Nice, good catch. Feel free to go ahead and create a PR @parasharrajat.
@NicMendonca feel free to accept @parasharrajat proposal on upwork.

[NicMendonca]

@parasharrajat just sent the offer in Upwork - thanks!

[parasharrajat]

@NicMendonca Just sent the PR in Github - thanks! 😅

[isagoico]

Issue reproducible today during KI retests

[parasharrajat]

I will test it today.

[parasharrajat]

@isagoico I am not able to reproduce it anymore. Could you please tell me :
the version of the app?
Platform?
any video? if possible.
Thanks.

[NicMendonca]

@isagoico bumping @parasharrajat request ☝️ Thanks!

[isagoico]

Issue is not reproducible anymore, seems like it was fixed above 🎉

[parasharrajat]

Thank you for letting us know.