react-native: Controlled TextInput has problems with capitalising characters on iOS

I have reviewed the documentation
I have searched existing issues
I am using the latest React Native version

When using a controlled TextInput and you end a message with either . or any other character that will make the next character being capitalised, and you go back to edit a word in the message you’ve already written, the next letters will always be capitalised, because it only looks at the last character in the message.

Environment

OS: macOS High Sierra 10.13.4 Node: 8.7.0 Yarn: 0.22.0 npm: 6.0.1 Watchman: 4.9.0 Xcode: Xcode 9.3.1 Build version 9E501 Android Studio: Not Found

Packages: (wanted => installed) react: 16.3.0-alpha.1 => 16.3.0-alpha.1 react-native: https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz => 0.54.2

Steps to Reproduce

Create a controlled TextInput (here’s a snack)
In the TextInput, write Hello Bruce. (edit: Important that you end with . (dot space) so that auto-capitalised is trigged)
Place the cursor between Hello and Bruce., and try to write something, for instance there
When you start to write, capitalise will automatically turn on, and if you turn it off, it will be on again for the next letter.

Expected Behavior

Non-capitalised letters.

Actual Behavior

Capitalise automatically turns on.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 21 (8 by maintainers)

Most upvoted comments

This issue should be reopened. The exact issue described is not resolved running 0.57.0. @dchersey it does seem to happen intermittently even when turning off capitalize.

pribeh on Sep 20, 2018

@mcmar YES! That does cause it for me. I’ve asked my beta testers to try it as well but I expect the answer will be yes.

We are also seeing an intermittent issue where the keyboard goes into ALL CAPS in the middle of typing and can’t be reset. I believe it may also be related to going back and editing but haven’t been able to isolate that scenario precisely. Could this be related?

dchersey on Aug 19, 2018

This is still randomly re-occuring for some of my users for the chat app I have built using Gifted Chat. It’s less frequent, but perhaps triggered by another sequence of actions. Anybody else?

dchersey on Jul 23, 2018

Well, partly @laurent22. What I tried was to use TextInput as partly controlled by storing the value for every change in my redux store, but not feeding the value into the TextInput for every render. Instead I’m setting the value in componentDidMount with refs and native events like so:

this.textinput.setNativeProps({ text: this.props.text });

The problem is that since I’m building a chat, I need to clear the input field on submit. But it occurs that React Native also have a bug on clearing the TextInput (#18272) which makes that approach useless for me since I can’t clear the value.

jaaberg on Jun 10, 2018