Keep keyboard open after posting a new comment on mobile

[quinthar]

Currently, the keyboard closes when you send a new comment creating a kind of jarring experience. I notice on slack the keyboard remains open enabling you to quickly send another comment. Assigning medium because it's mobile, and highly visible when you make a comment.

[tgolen]

I looked into this (for probably too long) on iOS.

I turned off the blurOnSubmit setting for the text input, which is what was making it hide. That works OK, except that when submitting a comment, now the value in the input doesn't clear, and a newline is added to the text. this.setState({comment: ''}) should be clearing the value.

I tried using this.textInput.clear(); to clear out the text field and that didn't change the behavior.

I changed the control to only be a single line component, and both setting the state and using .clear() clears out the value just fine. There is a big difference in behavior between single-line and multi-line text inputs.

@AndrewGable or @Jag96 Maybe I am missing something? My WIP branch is here if you want to take a look at it. https://github.com/AndrewGable/ReactNativeChat/compare/tgolen-mobile-focus?expand=1

[Jag96]

Had a look at this and it seems like this is a problem that a lot of people have, and RN hasn't done a great job of making it easy for the multiline component. I was able to get the textInput to clear by using this.textInput.setNativeProps({text: ''});, but it is hit and miss if you call that function immediately after this.props.onSubmit(this.props.reportID, this.state.comment);. The only way I could get this to be consistent was to add a setTimeout:

setTimeout(() => {
    this.setState({
        comment: '',
    });
    this.textInput.setNativeProps({
        text: ''
    });
}, 20);

Additionally, I found the following issues, but no fixes

• Prevent multiline newline character flicker (no fix): No way to prevent newline character in multiline TextInput (without flicker) facebook/react-native#28535 (comment)
• This was an issue that was fixed in the library, so I tried to implement that but I got the same behavior as you: Multiline TextInput clear() then focus() adds a newline. necolas/react-native-web#1013

[tgolen]

Ah, cool that you got it working.

Rather than using setTimeout could you use _.defer() instead (it's just a setTimout with 0 for the second argument, but makes it a little more consistent with our web-e code)? Let's also add plenty of scary comments saying it's a hack and what needs to be done for the hack to be removed.

[Jag96]

While I got the diff working on iOS, it does not work for Android. Setting returnKeyType to send on iOS uses the proper value (as defined in the docs), however, on Android it just shows the newline value and the onSubmitEditing callback is not triggered. I've been unable to get the callback to trigger on Android, and I've also been unable to get the keyboard to stay open while leaving onBlurSubmit on the component. More examples of this problem in the past:

• onSubmitEditing not working on TextInput when Multiline={true} in React Native(android) facebook/react-native#17825 is the same issue we're having, which was locked
• https://stackoverflow.com/questions/44975541/react-native-multiline-returnkeytype-bug/48191897
• TextInput onSubmitEditing is called when multiline is true facebook/react-native#17634 is an old issue where this was working on Android but not iOS

There's also an open PR for removing this functionality from iOS so it matches android: facebook/react-native#29177

Is there a reason we aren't using a UI button to do the submit? That could be an alternative for getting this working in a timely manner, otherwise, we can look at the RN code and see if there's a potential fix there for keeping the keyboard open after submitting w/ blurOnSubmit set to true.

cc @AndrewGable in case he has any other ideas

[Jag96]

Spoke w/ @shawnborton, going to take this one and add a button embedded in the input text like we currently have on reports.