Emoji Picker - Moving by arrow keys will eventually lose focus when reaching last row of emojis

[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

Focus isn't lost even after reaching the last emoji on the list.

Actual result

After reaching the last emoji on the list, the focus is not visible anymore.

Action Performed

1. Log in to expensify.cash
2. Navigate to a conversation
3. Click on the emoji icon
4. Use the arrow keys to reach the bottom of the list

Platform

Web ✔️

Build: 1.0.36-0

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

Notes/Images/Video

Bug5052011_20210503_160509.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

Reported while executing PR #2532 (comment)

[isagoico]

Issue reproducible during today's KI retests

[jasperhuangg]

I am still looking into this, wasn't able to figure it out last week. There's a bizarre bug that might caused by React-Native, and may not be fixable on our end.

Essentially, the bug is caused by how a single call to FlatList::scrollToOffset triggers multiple onScroll events with the incorrect offsets. We can't throttle these calls since we also rely on the onScroll events to handle actual scroll events with a trackpad/mouse.

2021-05-10_12-18-45.mp4

[jasperhuangg]

I looked into it some more yesterday with @robertjchen and wasn't able to discern why the aforementioned bug was happening. I thought it may be an actual bug with React-Native, so I opened an issue in the React-Native repo:
react/react-native#31501

I also made a self-contained sandbox where you can reliably reproduce the bug:
https://codesandbox.io/s/flatlist-scrolltooffset-triggers-multiple-onscroll-events-with-incorrect-values-96q1v?file=/README.md

[iwiznia]

Not sure why this was not labeled as external, doing that now.

[MelvinBot]

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