Open izarutskaya opened 2 months ago
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.
The timezone list returns to the top of the list when holding down Tab
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.
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.
// Debounce the onFocusedIndexChange callback
const debouncedOnFocusedIndexChange = useCallback(debounce(onFocusedIndexChange, 100), [onFocusedIndexChange]);
Job added to Upwork: https://www.upwork.com/jobs/~0198bd49e44880048d
Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External
)
@allroundexperts, @lschurr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
@allroundexperts Can you review the proposal here?
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.
Still looking for better proposals.
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
Still waiting on proposals
Same as above.
@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!
The timezone list returns to the top of the list when holding down Tab
tab
, browser will find next focusable element in the screen, then focus it. ListItem received onFocus
event then list will scroll to focused item.tab
, the list will scroll rapidly, make items not have enough time to display, then browser will focus to first item as a cyclefocusable
of ListItem, then handle press tab
manually like press arrow-down
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.
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
Looks like we have a new proposal here @allroundexperts
Bump on this @allroundexperts
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
Bumped in Slack - https://expensify.slack.com/archives/C01GTK53T8Q/p1721243256819679
@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?
Bump on this @drminh2807
@allroundexperts @lschurr this issue is now 4 weeks old, please consider:
Thanks!
Still looking for proposals.
The timezone list often focuses on the text input after holding the Tab key for a long while.
The text input in the base selection list is set to select its text on focus.
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.
Consider setting the selectTextOnFocus
attribute of the TextInput
in BaseSelectionList
to false
on web and desktop platforms.
Another option is to check if the text input is still focused before selecting the text in the setTimeout
function.
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
@allroundexperts - Will you check out the new proposal?
Bump on this one @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
Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
π£ @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 π
I agree that fixing it in react-native-web
would be ideal.
Any update on this one @QichenZhu?
My PR is still pending review from react-native-web
. Should we use patch-package
in the meantime?
I don't think so. Let's wait and see if they approve.
No updates. Awaiting upstream review.
PR is still open
Can we move this to weekly?
Done
Looks like we're still waiting on the PR review
Looks like all changes on the PR were approved - anything holding us back on this one @QichenZhu @allroundexperts?
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:
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?
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
Issue Owner
Current Issue Owner: @QichenZhu