[HOLD for payment 2024-11-18] [$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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6521922_1719122203288.Screen_Recording_2024-06-20_at_00.21.55.mp4

Bug6521922_1719121844359.Screen_Recording_2024-06-20_at_00.21.55.mp4

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: @lschurr

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

App/src/hooks/useArrowKeyFocusManager.ts

Line 76 in d19a574

onFocusedIndexChange(focusedIndex);

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

What alternative solutions did you explore?

[melvin-bot]

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

[melvin-bot]

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

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