[$250] Settings - The timezone list returns to the top of the list when holding down Tab

[izarutskaya]

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: v9.0.1-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): crowdtest.expensify+test002@gmail.com Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-internal team

Action Performed:

1. Open the app
2. Go to Account Settings > Profile
3. Open the Timezone > Open time zone list
4. From the first item (Tap on the Tab button, and the time zone will scroll to the top)
5. Keep long pressing a Tab key (~15s)
6. Tap on the Tab button for more time

Expected Result:

The list will run gradually to the end of the list.

Actual Result:

The timezone list returns to the top of the list when holding down the Tab. Observation can be seen that the list does not run to the end but gradually moves upward when holding the Tab button for a period of time.

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/d1b0e8e1-0ad4-47b3-95ec-f8aa2981d5c5

https://github.com/Expensify/App/assets/115492554/4738993c-4761-42bc-8608-3803f2db43e7

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0198bd49e44880048d
• Upwork Job ID: 1805660378353287866
• Last Price Increase: 2024-07-23
• Automatic offers:
• QichenZhu | Contributor | 103311257

Issue Owner

Current Issue Owner: @QichenZhu

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

[devguest07]

Proposal

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

The timezone list returns to the top of the list when holding down Tab

What is the root cause of that problem?

When the Tab key is pressed repeatedly or held down, numerous JavaScript calls are triggered for the Tab listener action. In the browser, these JavaScript calls are handled by the event loop and callback queue asynchronously. Due to the high volume of JavaScript calls, the browser cannot render each Tab action sequentially. As a result, we may not see the focus move smoothly through each item; instead, the focus might jump ahead by several items. For example, if the Tab key is pressed 100 times rapidly, the focus might appear to jump from item 1 directly to item 10, which is the effect observed by the QA team.

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

To address the issue of the Tab key causing the focus to jump when pressed rapidly, we can implement debouncing. Debouncing ensures that a function is not called too frequently within a short period of time. We can debounce the onFocusedIndexChange callback to limit the number of times the function is executed.

https://github.com/Expensify/App/blob/d19a574fbf1f81d03274c84e5a8460001100963c/src/hooks/useArrowKeyFocusManager.ts#L76

// Debounce the onFocusedIndexChange callback 
const debouncedOnFocusedIndexChange = useCallback(debounce(onFocusedIndexChange, 100), [onFocusedIndexChange]);

What alternative solutions did you explore?

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~0198bd49e44880048d

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@allroundexperts, @lschurr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[lschurr]

@allroundexperts Can you review the proposal here?

[allroundexperts]

Thanks for your proposal @devguest07. I don't think debouncing is the proper solution here. Your RCA seems to be unconvincing to me. Try pressing tab on GH for example. It would switch focus smoothly.

[allroundexperts]

Still looking for better proposals.

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

Still waiting on proposals

[lschurr]

Same as above.

[melvin-bot[bot]]

@allroundexperts @lschurr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[drminh2807]

Proposal

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

The timezone list returns to the top of the list when holding down Tab

What is the root cause of that problem?

• When press tab, browser will find next focusable element in the screen, then focus it. ListItem received onFocus event then list will scroll to focused item.
• While holding tab, the list will scroll rapidly, make items not have enough time to display, then browser will focus to first item as a cycle

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

• Disable focusable of ListItem, then handle press tab manually like press arrow-down

What alternative solutions did you explore? (Optional)

• Replace SectionList with FlashList to make render time faster, I haven't try it, but it should be a suggestion

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]]

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

[lschurr]

Looks like we have a new proposal here @allroundexperts

[lschurr]

Bump on this @allroundexperts

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

Bumped in Slack - https://expensify.slack.com/archives/C01GTK53T8Q/p1721243256819679

[allroundexperts]

@drminh2807 Thanks for your proposal. I think that disabling the focus is not fixing the issue at its root. Are we following a similar pattern elsewhere?

[lschurr]

Bump on this @drminh2807

[melvin-bot[bot]]

@allroundexperts @lschurr this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[allroundexperts]

Still looking for proposals.

[QichenZhu]

Proposal

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

The timezone list often focuses on the text input after holding the Tab key for a long while.

What is the root cause of that problem?

The text input in the base selection list is set to select its text on focus.

https://github.com/Expensify/App/blob/17a8bbd8e9a5730f7979ba816d6d373d1787bc8f/src/components/SelectionList/BaseSelectionList.tsx#L689

However, the text selection is executed after a timeout, so the text input is selected and re-focused regardless of where the focus is, since the timeout has lower priority than other synchronous code and micro-tasks.

https://github.com/necolas/react-native-web/blob/54c14d64dabd175e8055e1dc92e9196c821f9b7d/packages/react-native-web/src/exports/TextInput/index.js#L287-L297

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

Consider setting the selectTextOnFocus attribute of the TextInput in BaseSelectionList to false on web and desktop platforms.

What alternative solutions did you explore? (Optional)

Another option is to check if the text input is still focused before selecting the text in the setTimeout function.

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

@allroundexperts - Will you check out the new proposal?

[lschurr]

Bump on this one @allroundexperts

[allroundexperts]

@QichenZhu Thanks for your proposal. I think your RCA is correct and the solutions make sense as well.

react-native-web is actively maintained. I'd much prefer to have your secondary solution applied to react-native-web package since it seems like a genuine bug. Can you raise an issue in that repository and raise a fix there?

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

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

[luacmartins]

I agree that fixing it in react-native-web would be ideal.

[QichenZhu]

Raised an issue and PR in react-native-web. Waiting for their review.

[lschurr]

Any update on this one @QichenZhu?

[QichenZhu]

My PR is still pending review from react-native-web. Should we use patch-package in the meantime?

[allroundexperts]

I don't think so. Let's wait and see if they approve.

[QichenZhu]

No updates. Awaiting upstream review.

[lschurr]

PR is still open

[QichenZhu]

Can we move this to weekly?

[luacmartins]

Done

[lschurr]

Looks like we're still waiting on the PR review

[lschurr]

Looks like all changes on the PR were approved - anything holding us back on this one @QichenZhu @allroundexperts?