[HOLD for payment 2022-03-24] $500 Keyboard is hidden after user send message with send button in mobile web - reported by @K4tsuki

[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. Navigate to any room in mobile web
2. Send a message by pressing send button
3. Onscreen keyboard disappear / hidden

Expected Result:

Onscreen keyboard stays visible like in native apps

Actual Result:

Onscreen keyboard is hidden/disappears

Workaround:

unknown

Platform:

Where is this issue occurring?

• Mobile Web

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

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

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[laurenreidexpensify]

https://www.upwork.com/jobs/~012a764a955a9354d3

[MelvinBot]

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

[MelvinBot]

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

[roryabraham]

I have a feeling this might be more trouble than it's worth. Dealing with the virtual keyboard's disobedience on mobile safari is always a pain.

[laurenreidexpensify]

@K4tsuki did you have a proposal on how to fix this?

[K4tsuki]

@laurenreidexpensify currently I don't have proposal for this issue.

[laurenreidexpensify]

Increased pricing to $500

[mollfpr]

Proposal

I notice that the issue is the default behavior of the browser. So what I'm gonna do add this.textInput.focus() to onFocus props of TouchableOpacity.

App/src/pages/home/report/ReportActionCompose.js

Lines 573 to 583 in bc4f429

	<TouchableOpacity
	style={[
	styles.chatItemSubmitButton,
	this.state.isCommentEmpty ? styles.buttonDisable : styles.buttonSuccess,
	]}
	onPress={this.submitForm}
	underlayColor={themeColors.componentBG}
	disabled={this.state.isCommentEmpty || isBlockedFromConcierge || isArchivedChatRoom}
	hitSlop={{
	top: 3, right: 3, bottom: 3, left: 3,
	}}

+ onFocus={() => this.textInput.focus()}

This will make re-focus the text input after the button is pressed. Also, this will fix text input lost focus in Web.

mWeb Chrome

RPReplay_Final1646819206.MP4

mWeb Safari

RPReplay_Final1646820212.MP4

[parasharrajat]

Interesting solution @mollfpr. It seems to work well on the mobile Web. But it will cause problem on the web. When a user is focusing on the send button via tab it will move it back to the composer.

[mollfpr]

Nice catch @parasharrajat . There’s another approach. Adding ‘this.textInput.focus()’ inside ‘submit’ also work, but there’s some delay for the focus applied to text input.

[parasharrajat]

Yeah, that delay is bad as it will close the keyboard and reopen it causing layout shifts.

[parasharrajat]

I do have a proposal too cc: @roryabraham

Proposal.

1. We can preventDefault mouseDown event to prevent the focus from being lost from Composer. test here

On Submit button add an event

App/src/pages/home/report/ReportActionCompose.js

Line 573 in 6e83f4a

<TouchableOpacity

				<TouchableOpacity
                      ....
                      onPress={this.submitForm}
					  onMouseDown={e => e.preventDefault()}
					  ....

then in submitForm reset the selection to 0 so that cursor is reset as well at the last line.

App/src/pages/home/report/ReportActionCompose.js

Lines 385 to 386 in 6e83f4a

	this.setTextInputShouldClear(true);
	}

this.textInput.setNativeProps({selection: {start: 0, end: 0}});

[mollfpr]

@parasharrajat I think you got this 😉

[roryabraham]

I can't validate this atm because of https://expensify.slack.com/archives/C01GTK53T8Q/p1646964936524219

[roryabraham]

@parasharrajat I managed to test out your solution on a physical device and it worked well 👍

LGTM

[roryabraham]

I just removed the Help Wanted label and will wait for a PR. @laurenreidexpensify feel free to hire @parasharrajat for this on upwork.

[roryabraham]

PR merged – as a reminder @laurenreidexpensify since @parasharrajat submitted the PR to fix this issue he's not eligible for the C+ reward for the issue as well, as stated our C+ guidelines:

If C+ wants to fix an issue they’re assigned to they will only be compensated for the fix ($0 for the C+ review) and they won’t have another C+ assigned to review. The CME assigned to the issue will review proposals fairly, not favoring the C+.

[botify]

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

• Keep focus on the Composer when send button is clicked #8091

If no regressions arise, payment will be issued on 2022-03-24. 🎊

[mallenexpensify]

Taking over CM to manage payments. @parasharrajat , can you apply here plz https://www.upwork.com/jobs/~012a764a955a9354d3

[parasharrajat]

@mallenexpensify Applied with correct terms. Thanks.

[mallenexpensify]

Paid @parasharrajat $500 for the fix and @K4tsuki $250 for reporting. Thanks!

[MonilBhavsar]

Since the linked PR caused a small regression, @parasharrajat could you please follow the steps mentioned in the doc here and fill the RCA doc. It will be helpful to learn something and improve our process.
I have added a row in the RCA sheet, feel free to update it.

[parasharrajat]

Thanks, @MonilBhavsar but I wasn't C+ on this issue. I solved with a PR as a contributor. So IMO, the C+ assigned on the new issue should proceed with the steps. cc: @mananjadhav. Please let me know otherwise whatever is the process.

---

On a side note, I tried to solve it but didn't find any solution.

[mallenexpensify]

@parasharrajat from the main C+ doc

Identify the initial/root/core/offending issue and PR that was responsible. Add “Root GH issue link” to the sheet and add the C+ from the root issue as “Person leading”.

Would that not be you?

[parasharrajat]

Ok, I will do that.

[MonilBhavsar]

Thank you! 🙌

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.