mWeb - Request Money - Search box is not auto focused when changing currency

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue was found while executing PR #4662

Action Performed:

1. Go to https://staging.new.expensify.com
2. Log in with any account and select any user
3. Click on Plus and select Request Money
4. Click on currency

Expected Result:

Cursor should appear after selecting a currency

Actual Result:

Search currency box should be autofocused according to PR steps. #4662

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web ✔️

Version Number: 1.0.86-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5197704_Image_from_iOS__8_.mp4

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[isagoico]

Issue is still reproducible in 1.0.86-2 iOS mWeb only. Android mWeb is working as expected.

[luacmartins]

Seems to be fixed in v1.0.86-3?

Screen.Recording.2021-08-18.at.5.20.52.PM.mov

[jasperhuangg]

@luacmartins Seems like it's only an issue on a physical device, just tried it on my iPhone and it's not pulling up the keyboard, however the styles for focus are being applied on the text input.

I don't think this should be a deploy blocker though.

[jasperhuangg]

I need to head out right now so I'm going to unassign myself and find help, but I got really close to figuring out a solution:

So if you pass autoFocus as true into here the input actually autofocuses correctly, but it conflicts with the animations we have for navigation screens since I think iOS has a requirement for any focused text inputs to always be entirely visible on screen. It makes it look super janky:

RPReplay_Final1629339877.MP4

I think a possible solution would be to delay focusing the text input until after the animation finishes. However, I tried sticking this block in the componentDidMount to no success, so I don't know if there's a straightforward way to programmatically focus text inputs with a delay.

setTimeout(() => this.textInput.focus(), 2000);

// just in case
setTimeout(() => this.textInput.current.focus(), 2000);

[parasharrajat]

IOS Safari will block any kind of focus that is applied asynchronously which means inside settimeout or Interaction Manager.

I am sure we can't do anything to fix this. Previously, we moved on to leave this as it is and I think best would be to do thr same now.

We cannot focus on the input in sync manner it will interfere with animations.