Automatically open the keyboard when editing a message in mobile

[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 to staging in mobile
2. Navigate to a conversation
3. Edit a comment

Expected Result:

Keyboard should automatically open.

Actual Result:

Keyboard doesn't open and user has to tap on the edit field to open the keyboard.

Workaround:

User can tap on the edit box to open the keyboard.

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.0.81-3

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

Notes/Photos/Videos:

editcomment.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @quinthar https://expensify.slack.com/archives/C01GTK53T8Q/p1627665091022800

when you do a long tap on mobile to edit a comment, it should automatically show the keyboard. Otherwise it shows the edit box and then when you tap into it only then the keyboard come out which is a little jarring.

[MelvinBot]

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

[mananjadhav]

Proposal

This is because generally, the autoFocus doesn't work well in all the browsers React uses a polyfill to solve this problem but not to a full extent. My solution would be to take the reference of the input and manually focus. A snippet of the implementation:

componentDidMount() {

    if(this.textInput) {
        if(this.props.autoFocus) {
            this.textInput.focus();    // this.textInput.current.focus();
        }
    }
}

[tgolen]

Hm, I don't think this is a browser compatibility issue necessarily. It's possible this was purposefully turned off in the past looking at issues like https://github.com/Expensify/Expensify/issues/159543. Perhaps @marcaaron has a more clear picture about where we currently stand with this than I do.

From what I gather, any proposal here should only be affecting the specific flow in question, and the proposal above looks like it would apply to EVERY flow where we use autoFocus.

[marcaaron]

From what I gather, any proposal here should only be affecting the specific flow in question, and the proposal above looks like it would apply to EVERY flow where we use autoFocus.

Right, the linked issue deals with auto-focus when navigating to a chat. I believe we'd want to preserve that behavior.

This is because generally, the autoFocus doesn't work well in all the browsers React uses a polyfill to solve this problem but not to a full extent.

Not too sure what is meant by this, but unsure why this has to do with browsers or polyfills. When we say "mobile" we mean mobile web and native mobile for the purposes of this issue. I'd guess it's possible this is not a bug, but a feature request.

[MelvinBot]

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

[mananjadhav]

I've put a decent amount of effort to figure out the issue. But it seems to be the default behavior of the input field in mobile browsers.

https://jsbin.com/gilikehivo/edit?html,output

This behavior exists in the Login and Signup flow too.

Also, I couldn't find any way to programmatically open a keyboard. I've also checked few websites like slack (updating account settings username), and Amazon (updating the login & security), the behavior is the same.

[parasharrajat]

@mananjadhav Keyboard is purposely disabled here and I am pretty sure we would want to keep that behavior.
Imagine, you press edit on a message and the then message will scroll to the bottom and in the meantime, the whole layout will shift up due to the keyboard. How bizarre will that look?

[mananjadhav]

I agree. I was highlighting the default behavior and the point being that this isn't a bug.

[MelvinBot]

@tgolen 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[MelvinBot]

@tgolen 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[tgolen]

Yes, I was also under the impression that mobile giants (Apple and Google) greatly discouraged giving things auto-focus because it creates a worse UX in most cases. I am fine with closing this unless @AndrewGable and @Jag96 have any reason to reopen it with new information.