[HOLD for payment 2022-02-22] Android - Close account text box pointer doesn't start on top - 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 app
2. Navigate to Settings>Security>Close Account
3. Star typing in the Text box

Expected Result:

Text pointer should start on top

Actual Result:

Close account text box pointer doesn't start on top

Workaround:

unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.32-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

f0c2b18c-f8a7-4c65-abc4-3aa6e5c53780.mp4

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

View all open jobs on GitHub

[MelvinBot]

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

[mateusbra]

PROPOSAL (if considered external)

we need to add:
textAlignVertical="top" prop to CloseAccountPage.js here:

App/src/pages/settings/Security/CloseAccountPage.js

Lines 73 to 80 in 921fa4f

	<TextInput
	multiline
	numberOfLines={6}
	value={this.state.reasonForLeaving}
	onChangeText={reasonForLeaving => this.setState({reasonForLeaving})}
	label={this.props.translate('closeAccountPage.enterMessageHere')}
	containerStyles={[styles.mt5]}
	/>

Screenshot

[JmillsExpensify]

Upwork job is posted here: https://www.upwork.com/jobs/~019e4050a252db42da

[MelvinBot]

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

[MelvinBot]

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

[mateusbra]

thanks, proposal posted on upwork @JmillsExpensify

[parasharrajat]

@mateusbra Your proposal looks good to me. Can't we pass the same via styles?

cc: @iwiznia

🎀 👀 🎀 C+ reviewed

[mateusbra]

@parasharrajat sure we can!

[parasharrajat]

Alright, lets do that instead.

[mateusbra]

@parasharrajat I tried passing it by style props and I think we are unable to do it. I think we would have to make changes within BaseTextInput.js to spread thoses passed styles here:

App/src/components/TextInput/BaseTextInput.js

Lines 176 to 201 in 0758296

	<TextInputWithName
	ref={(ref) => {
	if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
	this.input = ref;
	}}
	// eslint-disable-next-line
	{...inputProps}
	value={this.value}
	placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null}
	placeholderTextColor={themeColors.placeholderText}
	underlineColorAndroid="transparent"
	style={[
	this.props.inputStyle,
	styles.flex1,
	styles.w100,
	!hasLabel && styles.pv0,
	this.props.secureTextEntry && styles.secureInput,
	]}
	multiline={this.props.multiline}
	onFocus={this.onFocus}
	onBlur={this.onBlur}
	onChangeText={this.setValue}
	secureTextEntry={this.state.passwordHidden}
	onPressOut={this.props.onPress}
	name={this.props.name}
	/>

or if we don't want to do that we could just use textAlignVertical="top" (how I proposed before) like we use here in another component:

App/src/pages/workspace/WorkspaceInvitePage.js

Lines 292 to 303 in 0758296

	<TextInput
	label={this.props.translate('workspace.invite.personalMessagePrompt')}
	autoCompleteType="off"
	autoCorrect={false}
	numberOfLines={4}
	textAlignVertical="top"
	multiline
	containerStyles={[styles.workspaceInviteWelcome]}
	value={this.state.welcomeNote}
	placeholder={this.getWelcomeNotePlaceholder()}
	onChangeText={text => this.setState({welcomeNote: text})}
	/>

[parasharrajat]

inputStyle prop is used for passing styles to input but if that does not work direct prop works for me. Only issue with the later is that it is deprecated.

[mateusbra]

inputStyle, didn't worked I think this prop is being overwritten when we call BaseTextInput:

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

Lines 6 to 17 in 0758296

	const TextInput = forwardRef((props, ref) => (
	<BaseTextInput
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	// Setting autoCompleteType to new-password throws an error on Android/iOS, so fall back to password in that case
	// eslint-disable-next-line react/jsx-props-no-multi-spaces
	autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
	innerRef={ref}
	inputStyle={[styles.baseTextInput]}
	/>
	));

So, we should follow with my first proposed fix (passing it direcly)?

[mateusbra]

@parasharrajat do you think I could raise a new issue fixing this on slack?

inputStyle, didn't worked I think this prop is being overwritten when we call BaseTextInput

as in the future we are going to want it to work as expected.

[parasharrajat]

Already fixed it here #7318. We can wait for that to merge.

[mateusbra]

Ok, so, once I be hired on upwork I'll rise a PR

[mateusbra]

@JmillsExpensify did you received my proposal in upwork?

[JmillsExpensify]

Yes! Thanks, I received and hired you for your proposal in Upwork. Please continue with the PR.

[mateusbra]

Thank you @JmillsExpensify !

[mateusbra]

PR ready for review!

[JmillsExpensify]

Thanks for the quick turnaround!

[JmillsExpensify]

PR deployed to staging yesterday. We're moving forward MelvinBot.

[botify]

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

• pointer on top within close account page #7498
• pointer on top within close account page #7498

If no regressions arise, payment will be issued on 2022-02-22. 🎊

[JmillsExpensify]

Woo! Now it's just a question of time. I'll circle back for payment following the regression period.

[JmillsExpensify]

Jumping in to processes contributor payments. I'll close the issue when that step is complete for all contributors.

[MelvinBot]

📣 @mateusbra You have been assigned to this job by @JmillsExpensify!
Please apply to this job in Upwork 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 📖

[JmillsExpensify]

All contributors, let me know if you have any issues with payments. Thank you!