[HOLD for payment 2023-01-05] [$4000] Emoji Picker list jumps while scrolling through arrow keys reported by @parasharrajat

[kavimuru]

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 to the app on web.
2. Navigate to any report.
3. Open the Emoji Picker.
4. User down arrow key to scroll the list until you reach the section Travel & Places.
5. Now keep on scrolling down via arrow key .
6. Notice that list jumps and highlighted emoji is out of focus.

Expected result:

Highlighted emoji should remain in focus and list does not jump positions.

Actual:

Emoji List jump positions and highlighted emoji goes out of focus.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.2.28-0
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Recording.941.mp4

screen-2022-11-16_03.48.45.mp4

Expensify/Expensify Issue URL:
Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1668550863631129

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011a004a1208ec7fec
• Upwork Job ID: 1598460283393093632
• Last Price Increase: 2022-12-15

[melvin-bot]

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

[JmillsExpensify]

Taking this one given that I'm on the emoji tracking issue. Not treating this as an accessibility issue.

[JmillsExpensify]

I'm wavering a bit based on my last comment. This bug seems to only affect that one section right? If this is a clear and quick fix, then I'm more amenable to addressing it now, even though we're not focused on keyboard/accessibility at the moment. Getting another opinion from engineering.

[melvin-bot]

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

[JmillsExpensify]

@Gonals Please see above for a second opinion. Thanks!

[parasharrajat]

This issue does not come under A11y/navigation issues. This is a bug with emoji list viewing. This does not affect only one section. It might affect more sections we add them. It is just a coincidence that the section lies where the bug occurs. The main issue is with the Flat list scrolling/rendering. Due to virtual scrolling, something bad is happening with our scrolling logic.

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[JmillsExpensify]

Ok well I think that's also my point here. Is this the only place this issue is happening with FlatList. I'm less and less interested is solving issues like this one as if this is the only place this is happening, and I think whatever solution we come up with, let's make sure that we aren't working on this same thing somewhere else in the repo in a silo.