App
App copied to clipboard
Expensify
[$250] Routing number field doesn't get auto focused after opening the page reported by @Puneet-here
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Action Performed:
- Navigate to settings > workspace > connect bank account
- Connect manually
Expected Result:
Routing number field should get focused
Actual Result:
It doesn't get focused
Workaround:
Unknown
Platform:
Where is this issue occurring?
- Web
- iOS
- Android
- Desktop App
- Mobile Web
Version Number: 1.2.9-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:
https://user-images.githubusercontent.com/43996225/193083990-640a22f3-a01b-44f2-93be-303bcda6cd3b.MP4
Expensify/Expensify Issue URL: Issue reported by: @Puneet-here Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1663687968571139
Triggered auto assignment to @zanyrenney (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Proposal
We can use autoFocus here https://github.com/Expensify/App/blob/7c29d89afe94b8e2f178e55b8f0137c91b1283c8/src/pages/ReimbursementAccount/BankAccountManualStep.js#L116
I can't repro this, but from the video, it looks good for eng triage and the solution above seems like a good one!
Triggered auto assignment to @iwiznia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.
Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)
Triggered auto assignment to @MonilBhavsar (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.
Proposal
It can be solved by the following:
- Using autoFocus prop. Reference
- Use ref prop by setting it in componentDidMount or in useeffect
@MonilBhavsar, @MitchExpensify, @Santhosh-Sellavel Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
@Santhosh-Sellavel could you please take a look at the proposals when you get chance
@Puneet-here Can you add the behavior(recordings) of all platforms here after applying your proposal, thanks!
Also @MonilBhavsar Please confirm if the autofocus is expected here with the design/product team. Autofocus creates weird keyboard issues in native I believe intentionally we don't set autofocus, thanks!
@MitchExpensify or @MonilBhavsar Due to Limited Availability unassigning this one. Can you reapply the external label to get another C+ assigned thanks!
Current assignee @MitchExpensify is eligible for the External assigner, not assigning anyone new.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)
Current assignee @MonilBhavsar is eligible for the External assigner, not assigning anyone new.
Please confirm if the autofocus is expected here with the design/product team. Autofocus creates weird keyboard issues in native I believe intentionally we don't set autofocus, thanks!
We discussed internally and in this particular case we want to set the autoFocus, so we're open to proposals!
Safari macOS:
https://user-images.githubusercontent.com/101883770/193843212-4d171439-493c-44d9-b1ef-0f85db8fb700.mov
Safari Ios:
https://user-images.githubusercontent.com/101883770/193843223-c8f41a38-7535-4513-9a63-41c494c23630.mov
We can also use shouldDelayFocus to be on the safer side.
Sorry, forgot to mention. In this particular case, we also want keyboard to open on Mobile devices when the field is auto focussed.
Sorry, forgot to mention. In this particular case, we also want keyboard to open on Mobile devices when the field is auto focussed
cc @Puneet-here
Yeah the keyboard opens, it was on simulator and I hadn't turned on the soft keyboard. I have checked it and it's working.
@Puneet-here the keyboard doesn't open on Android if we pass autoFocus to TextInput for this page.
Proposal
The issue on android is due to transitions so we should wait for transitions to complete before focusing the input so we need to pass autoFocus and shouldDelayFocus props to TextInput and it fixes keyboard opening issue on android and ios.
After Fixing:-
https://user-images.githubusercontent.com/81307212/195267473-2a4d8430-66eb-4782-9d08-fb0fc8033fa6.mov
@Puneet-here the keyboard doesn't open on Android if we pass autoFocus to TextInput for this page.
For that we can use shouldDelayFocus. I had suggested it at the end here
@Puneet-here @syedsaroshfarrukhdot not a fan of delaying focus on all platforms when only android is having the problem.
@rushatgabhane We can handle shouldDelayFocus on only on android Platform by introducing Platform.OS === 'android' just like below then it will delay focus only on android platform and fixing problem on android.
@syedsaroshfarrukhdot inline platform specific code isn't allowed by our style guide. We should use https://github.com/Expensify/App#platform-specific-file-extensions
thought: If we have 10 pages using shouldDelayFocus, will we break all 10 pages into platform specific files for just one prop?
Can we think of a cleaner way to achieve this?
Even better solution would be to remove the need of delaying focus on Android.