[HOLD for payment 2022-01-11] New Chat Room - Letters are doubled when entering Room Name

[isagoico]

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:

1. Log in with a expensifail account
2. Click on global create
3. Create new chat room
4. Start typing on room name

Expected Result:

Characters should not be doubled

Actual Result:

Characters are doubled with each type

Workaround:

Unable to type name correctly.

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.20-0

Reproducible in staging?: Yes
Reproducible in production?: No

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

Notes/Photos/Videos: Any additional supporting documentation

20211212_154634.1.mp4

**Issue reported by:**Applause
Job Post: https://www.upwork.com/jobs/~01404fae44cf52f88e

View all open jobs on GitHub

[MelvinBot]

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

[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.

[mountiny]

This is also related to #6314 cc @TomatoToaster

[TomatoToaster]

I can take a look at this one. Looks like this is happening only on android which is weeird.

[mountiny]

It is also only happening only if you click by mouse on the emulator keyboard and not when you actually type using notebook keyboard 🤯

[TomatoToaster]

Alright since this is behind a beta, I'm going to demote this from being a deployblocker, but I'll keep track of this bug as I'm working on this PR: #6737

[TomatoToaster]

Haven't figured out this one yet, once the Auth PR fixing the PolicyRoom logic goes to production I think this could become external since the New Room component is available in main and this bug is related to the modal, not policy rooms themselves.

[TomatoToaster]

Before making this external, @jasperhuangg would you happen to know the solution to this? I think it has to do with the android file for the prefix text box. It seems like this is only apparent in the emulator when you use the on-screen keyboard.

[TomatoToaster]

Hadn't gotten time to work on this yet. I'm going to unassign myself for the moment since I won't be able to get to it in a while.

[mountiny]

We can make this External even if Jasper would want to have a look, but better to let contributors know. This seems like a typo of an issue contributors will be able to fix. Gonna take this on as CME! :)

[MelvinBot]

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

[MelvinBot]

Current assignee @mountiny is eligible for the Exported assigner, not assigning anyone new.

[awesome1128]

I know why it's happening. I've fixed such issue 1 week ago.
Cui.

[awesome1128]

How can I put my email?
I want to have a chat in private channel.
Thanks.
Cui

[awesome1128]

Hey please let me know. I am ready to fix your issue right now because I've fixed such issue 1 week ago.
I would like to discuss further in private chat. How can we have a chat?

Thanks, Cui.

[parasharrajat]

Hi @awesome1128 ,

As per our policy, could you please put together a proposal explaining the following:

1. What is causing this bug?
2. Were you able to reproduce this?
3. What steps will you take to resolve this?
4. Your proposal should touch part of our code base.

Thanks.

[awesome1128]

Yeah, but I will explain it in private chat.
If I explain enough, you can fix it yourself, so it does not make sense how I can work on this project.
Please let me know.
Thanks.

[Santhosh-Sellavel]

@awesome1128

Please read our contributing guidelines.

Go through closed issues, know about the process. Make a formal proposal here.

[parasharrajat]

@awesome1128 This is necessary to understand what would you change in the codebase and how will it impact our app. Secondly, we pay the contributor if we use their solution but you would be submitting a PR with the solution if accepted.

[CamilaRivera]

The problem is the auto-capitalization behaviour present in TextInput for Android (prop documentation). The default value for the prop autoCapitalize seems to be "sentences". The auto-capitalization is not working well with our logic that applies some transformations to the text when it changes:

App/src/pages/workspace/WorkspaceNewRoomPage.js

Lines 105 to 123 in 149ed21

	checkAndModifyRoomName(roomName) {
	const modifiedRoomNameWithoutHash = roomName.substr(1)
	.replace(/ /g, '_')
	.replace(/[^a-zA-Z\d_]/g, '')
	.substr(0, CONST.REPORT.MAX_ROOM_NAME_LENGTH)
	.toLowerCase();
	const finalRoomName = `#${modifiedRoomNameWithoutHash}`;
	const isExistingRoomName = _.some(
	_.values(this.props.reports),
	report => report && report.policyID === this.state.policyID && report.reportName === finalRoomName,
	);
	if (isExistingRoomName) {
	this.setState({error: this.props.translate('newRoomPage.roomAlreadyExists')});
	} else {
	this.setState({error: ''});
	}
	return finalRoomName;
	}

Proposal

Pass prop autoCapitalize="none" to the TextInput here:

App/src/components/TextInputWithPrefix/index.android.js

Lines 43 to 52 in 149ed21

	<TextInput
	style={[
	styles.textInputWithPrefix.textInput,
	styles.noOutline,
	{height: 40},
	]}
	onChangeText={text => props.onChangeText(`${props.prefixCharacter}${text}`)}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])}
	/>

The component TextInputWithPrefix is not being currently used anywhere else, so I would suggest doing the simplest and hardcoding the prop to "none" there, but, if we wanted to disable the autoCapitalize only for the room name input, we can add an extra prop to TextInputWithPrefix:

• Modify TextInputWithPrefix defaultProps and propTypes to receive autoCapitalize as a prop
• Modify TextInputWithLabel in the same way to drill down the prop autoCapitalize
• Pass autoCapitalize="none" to TextInputWithLabel here:

  App/src/pages/workspace/WorkspaceNewRoomPage.js

  Lines 145 to 153 in 149ed21

  	<TextInputWithLabel
  	label={this.props.translate('newRoomPage.roomName')}
  	prefixCharacter="#"
  	placeholder={this.props.translate('newRoomPage.social')}
  	containerStyles={[styles.mb5]}
  	onChangeText={roomName => this.setState({roomName: this.checkAndModifyRoomName(roomName)})}
  	value={this.state.roomName.substr(1)}
  	errorText={this.state.error}
  	/>

[mountiny]

@CamilaRivera This proposal looks great! I think I would like to make this a little bit more general so adding the autoCapitalize as props to TextInputWithPrefix and pass default props as is the default per TextInput documentation will give us more wiggle room in future.

Just to confirm, have you tried the hardcoded solution and confirmed this will indeed solve this Android specific issue?

[mountiny]

@CamilaRivera Confirmed the hardcoded version works! 🎉 Let's fix this together 😊 Feel free to submit a PR with the general solution as you have described above. Please, apply for the Upwork job which is linked in the issue body.

@kevinksullivan Can you please Camila? Thank you very much 🙌

[MelvinBot]

📣 @CamilaRivera You have been assigned to this job by @mountiny!
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 📖

[parasharrajat]

Nice timing @mountiny , I was just looking at it.

🎀 👀 🎀 C+ reviewed

[CamilaRivera]

@CamilaRivera This proposal looks great! I think I would like to make this a little bit more general so adding the autoCapitalize as props to TextInputWithPrefix and pass default props as is the default per TextInput documentation will give us more wiggle room in future.

Just to confirm, have you tried the hardcoded solution and confirmed this will indeed solve this Android specific issue?

Yes, I tried the hardcoded solution. Thanks, @mountiny! I will send my PR with a more general approach as you suggested. I just applied for the Upwork job.

[kevinksullivan]

Hired on upwork @CamilaRivera .

[botify]

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

• Add autoCapitalize prop to avoid first letter duplication on android #6916

If no regressions arise, payment will be issued on 2022-01-11. 🎊

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[kevinksullivan]

Paid in upwork. Thanks @CamilaRivera !