[$250] Android/IOS -IOU-The cursor disappears after putting app in background in requesting money

[kbecciv]

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

---

Action Performed:

1. Open test app
2. Tap on a contact
3. Tap on +
4. Tap on request Money
5. Put app in background and Open app again

Expected Result:

The cursor indicating where the next number will appear will be seen after opening app

Actual Result:

The indicator disappears and can’t be found when entering amount for Money requested after putting app in background

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.75.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5605578_VID-20220611-WA0005.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause -Exploratory

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[Gonals]

Sounds like a good candidate for External!

[bfitzexpensify]

Upwork job post here

[melvin-bot]

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

[melvin-bot]

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

[dhairyasenjaliya]

Proposal

• here in IOUAmountPage in componentDidUpdate we are comparing current currency and updated currency if both are the same then we are just returning without focus, each and every time we go to request/send money this condition will remain true it will return without focus so we need to remove the conditional check from componentDidUpdate

App/src/pages/iou/steps/IOUAmountPage.js

Lines 75 to 81 in 0a33d88

	componentDidUpdate(prevProps) {
	if (this.props.iou.selectedCurrencyCode === prevProps.iou.selectedCurrencyCode) {
	return;
	}
	this.focusTextInput();
	}

Results

iOS

iOS.FIx.mp4

Android

android.mp4

Chrome Web

chrome.mov

[parasharrajat]

@dhairyasenjaliya Thanks for the proposal but this is not a good solution. ComponentDidUpdate will fire many times and focus is a blocking operation which will hurt performance. More importantly, that compoenentDidUpdate logic was added specifically for currency change use-case.

[JosueEchandiaAsto]

@parasharrajat

Proposal

Issue

The textField loses focus when the app goes to background.

Fix

Using appstate listeners we can know exactly when it goes from background to foreground without affecting the current logic, nor creating loops.
Docs: https://reactnative.dev/docs/appstate
Commit: 6f988d6

Result

Simulator.Screen.Recording.-.iPhone.13.-.2022-06-14.at.18.22.28.mp4

[usmanghani127]

Proposal

Issue

App/src/components/TextInput/BaseTextInput.js

Lines 48 to 62 in d8e4ada

	componentDidMount() {
	if (this.props.disableKeyboard) {
	this.appStateSubscription = AppState.addEventListener(
	'change',
	this.dismissKeyboardWhenBackgrounded,
	);
	}
	// We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
	if (!this.props.autoFocus || !this.input) {
	return;
	}
	this.input.focus();
	}

The AppState listener is unnecessary here, because there is no need to dismiss a keyboard which is already disabled:

App/src/components/TextInput/BaseTextInput.js

Line 274 in d8e4ada

showSoftInputOnFocus={!this.props.disableKeyboard}

Fix

By removing this listener and its relevant code (imports, listener remover), this issue can be fixed

Result

Screen.Recording.2022-06-15.at.11.26.08.mov

[liyamahendra]

Proposal

Since componentDidUpdate is called when the app returns to foreground, moving this.focusTextInput(); to the top solves the issue:

componentDidUpdate(prevProps) {
        this.focusTextInput();
        
        if (this.props.iou.selectedCurrencyCode === prevProps.iou.selectedCurrencyCode) {
            return;
        }
    }

fix.mp4

@parasharrajat are you aware about the reason why we have the if check and what problem it solves?

[marcaaron]

Hmm I feel that this is not a real bug or one that needs to be prioritized right now... but maybe I am missing why it matters.

@bfitzexpensify @Gonals thoughts on just closing this?

[Gonals]

Hmmm. I'd be ok with just closing this. I don't think I would consider it a bug as a user (and certainly not a relevant one)

[bfitzexpensify]

Yes, agreed. OK, closing it out.