[HOLD for payment 2022-09-16] [$250] Changing input field on Mobile App closes the keyboard - reported by @Tushu17

[mvtglobally]

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 mobile App(Ios/Android)
2. Go to settings > profile
3. Click/touch on First name
4. then touch on Last name

Expected Result:

It should not close the keyboard.

Actual Result:

Changing Input field closes the keyboard then user have to touch on the input field again to open the keyboard

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.68-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: Any additional supporting documentation

Screen.Recording.2022-04-26.at.1.35.39.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1650919901688689

Job Post https://www.upwork.com/jobs/~01e74f3da7a543363a

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @kevinksullivan (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[kevinksullivan]

@Tushu17 hired for reporting.

[melvin-bot]

@kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

Proposal

Cause:

We are using a Text component in TextInputLabel and this issue is happening when we press on the Text labels, otherwise, it is working fine, and here we have to disable the touchable of the label so that textinput's touchable can work

Solution:

we can disable the touch events here by

App/src/components/TextInput/TextInputLabel/index.native.js

Lines 17 to 31 in 50da22f

	<Animated.Text
	onLayout={({nativeEvent}) => {
	this.setState({width: nativeEvent.layout.width});
	}}
	style={[
	styles.textInputLabel,
	styles.textInputLabelTransformation(
	this.props.labelTranslateY,
	this.props.labelScale.interpolate({
	inputRange: [styleConst.ACTIVE_LABEL_SCALE, styleConst.INACTIVE_LABEL_SCALE],
	outputRange: [-(this.state.width - (this.state.width * styleConst.ACTIVE_LABEL_SCALE)) / 2, 0],
	}),
	this.props.labelScale,
	),
	]}

+pointerEvents="none"

[liyamahendra]

Proposal

Problem

The issue is when either of Firstname or Lastname Input field is focused with keyboard visible, if you try to focus on the other input field, the keyboard which was visible becomes invisible.

Solution

The Firstname and Lastname textfields are wrapped inside a ScrollView. The ScrollView has a props keyboardShouldPersistTaps which can be set to solve this issue.

Fix is to change the below line:

<ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>

to

<ScrollView style={styles.flex1} contentContainerStyle={styles.p5} keyboardShouldPersistTaps='handled'>

Below is the screencast showing the fix:

fix.mp4

[rushatgabhane]

Hmm, making the page compatible with Form should solve this issue too.

App/src/components/Form.js

Line 184 in 26956bb

keyboardShouldPersistTaps="handled"

@marcochavezf can you reproduce this issue on main? I could repro this issue 2 days ago, but now it seems to be fixed!

[jayeshmangwani]

@rushatgabhane I am able to reproduce this issue on main, please try to press on the label of the textinput you will see this issue please check this video for the latest main branch, and this is my proposal

9234.mov

[rushatgabhane]

App is crashing on main for me. I need some time to verify the proposal.
https://expensify.slack.com/archives/C01GTK53T8Q/p1654718949591419

[rushatgabhane]

please try to press on the label of the textinput you will see this issue

@jayeshmangwani thanks for helping me reproduce this issue!

This issue is reproducible on all pages that aren't using forms yet. Can you please post an updated proposal to fix this issue for all pages. (a few egs: AddSecondaryLoginPage, NewRoomPage etc)

[liyamahendra]

@rushatgabhane though @jayeshmangwani's solution fixes the issue, it doesn't address the root cause which is the ScrollView. The ScrollView will always cause this issue to happen unless the keyboardShouldPersistTaps prop is used.

Let's say you patch the code using @jayeshmangwani's solution now, and down the line a new custom composite control is used / added. Then this issue will again pop-up.

[rushatgabhane]

This issue is reproducible on all pages that aren't using forms yet. Can you please post an updated proposal to fix this issue for all pages. (a few egs: AddSecondaryLoginPage, NewRoomPage etc)

@liyamahendra I'm so sorry. This comment was meant for you. I forgot to tag you.
I def like your proposal better. Please submit an updated proposal which fixes this issue for all such pages

[melvin-bot]

This issue has not been updated in over 15 days. @liyamahendra, @marcochavezf, @kevinksullivan, @rushatgabhane eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mallenexpensify]

PR is actively being worked on #9441

[liyamahendra]

I've already received payment for this issue as it got auto approved by Upwork - JFYI.
Is there anything I need to do - asking as this is among the very first issues I've worked with Expensify.

[liyamahendra]

@luacmartins @marcochavezf @kevinksullivan ^^

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.98-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Solved closing of keyboard on changing text field on profile page #9441

If no regressions arise, payment will be issued on 2022-09-16. 🎊

[kevinksullivan]

Hm I'm not familiar with the auto approval feature but I do see it was paid. @mallenexpensify are you familiar with that?

[mallenexpensify]

@kevinksullivan , It looks like it might have been because a milestone was created vs hiring for fixed price (I've played with this a bunch lately, it's def a semi-common issue). @liyamahendra 's contract in Upwork was ended too.

Looks like @Tushu17 was paid today for reporting, I ended their contract.

And... just paid @rushatgabhane and ended contract (to make this easier to manage going forward.

Now, let's hope there are no regressions within the next three days 🤞 . We can close this on 9/16 without taking more actions if no regressions

[liyamahendra]

@mallenexpensify As a part of this issue, the Form refactor was done for which a bounty was agreed here. Just a gentle reminder note about this please.

cc: @luacmartins

[mallenexpensify]

@liyamahendra does that mean you're due another $250? If so, @luacmartins or @rushatgabhane can you confirm and I'll add the $250 to the job?

[rushatgabhane]

@mallenexpensify i don't think so. No additional payments due

@luacmartins' comment clearly says that all form refactors are $250. And this issue was a form refactor too. Nothing less, nothing more.

[liyamahendra]

@liyamahendra does that mean you're due another $250?

@mallenexpensify Yes, that's what I understood from @luacmartins' comment.

[liyamahendra]

@luacmartins can you please confirm?

[luacmartins]

@liyamahendra @mallenexpensify The bounty for the issue is $250. If a $250 payment was already made, which seems to be the case, no further payments are due anymore.

[liyamahendra]

@luacmartins did you mean bounty as in payment above the price for the actual issue?

[luacmartins]

@liyamahendra No, the bounty is the price we pay for fixing the issue, $250 in this case. Sorry if this was not clear for you.

[liyamahendra]

Well, I can just express my disappointment only then. Extremely disappointed!

[melvin-bot]

@liyamahendra, @marcochavezf, @kevinksullivan, @mallenexpensify, @rushatgabhane Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

@kevinksullivan @mallenexpensify are we good to close this issue? I don't think there was any regression.

[mallenexpensify]

Yes, thanks all