Controlled TextInput has problems with capitalising characters on iOS

[jaaberg]

• 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

1. Create a controlled TextInput (here's a snack)
2. In the TextInput, write Hello Bruce. (edit: Important that you end with . (dot space) so that auto-capitalised is trigged)
3. Place the cursor between Hello and Bruce., and try to write something, for instance there
4. 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.

[laurent22]

Could it be related to this recent commit? 8621d4b @TomSwift

[laurent22]

@jaaberg, have you find a way to fix or mitigate this issue by any chance?

[jaaberg]

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.

[Aleksefo]

Same issue appears in "react-native": "0.55.2".

[pribeh]

Experiencing the same issue on 0.55. It's really annoying users.

[Aleksefo]

Looks like the bug was fixed in v.0.56 ff70ecf

Tested in my app and it works as intended now.

[dchersey]

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?

[pribeh]

@dchersey are you running 0.56?

[hramos]

Fixed in ff70ecf.

[dchersey]

@pribeh yes I am.

[mcmar]

@dchersey We figured out what's triggering it. It's still happening in RN 0.56 when you have an emoji as the last character of your text input and then move the text cursor back (still with emoji as last character) and enter new letters somewhere in the middle of the string. It only capitalizes the letter i. Try that out and see if you can repro this issue.

[dchersey]

@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?

[pribeh]

@mcmar @dchersey I just reproduced it too.

[dchersey]

@mcmar this happens if even if 😍 is not at end lIke 😀 this. Moving the cursor back behind the emoji is the key.
If you move the cursor forward to after the emojii, you can type lowercase i. Back before the emoji, only uppercase. You can do this over and over again and it stays consistent. Should call this the emojIi bug.

[dchersey]

Anything I can do to help? I know RN and objective C but not the RN codebase

…

On Sun, Aug 19, 2018 at 9:52 AM Thomas Cermak ***@***.***> wrote: @mcmar <https://github.com/mcmar> @dchersey <https://github.com/dchersey> This sucks. I just reproduced it too. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19389 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAw2iZvkaV_mF4EYslX8Xk9MF-PtatOGks5uSW24gaJpZM4UIhKV> .

[mcmar]

I stand no chance of solving this. Objective C looks like Cyrillic lettering to me. Thus my reason for using react-native to begin with.

[Balasnest]

Facing everywhere in textInput component. I tried adding autoCaptialize = {none} with some of the textInput. It seems to be working. All the i's letter are caps still. But this need to add everywhere.

Is there any way to fix without updating / changing react native version?

[dchersey]

I tried this with autocapitalize = none previously and found it still happened sporadically; that was prior to 0.55 when it got better but was not completely fixed. I have opened a new issue just for this one (see above); perhaps you can comment there as this one is closed? I plan to post a gist to reproduce but am traveling now.

…

On Thu, Sep 20, 2018 at 3:27 AM Balasubramanian.M ***@***.***> wrote: Facing everywhere in textInput component. I tried with *autoCaptialize = {none}*. It seems to be working. I need to test completely. Is there any way to fix without updating / changing react native version. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19389 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAw2iSE_h1PXs1rg3x0FzVDhDXJTy2CAks5uc0NdgaJpZM4UIhKV> .

[superandrew213]

@hramos I'm still experiencing this in 0.57.0.

[pribeh]

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.

[hramos]

Please do file a new issue, specific to 0.57. It's OK to refer back to this issue when doing so. Please understand that tracking comments on closed issues imparts too much additional load on maintainers, and usually opening a new issue will have better luck of getting attention from the necessary people.