Duplicated letters when autoCapitalize="characters" on android

[joncrocks]

Description

When trying to implement an upper case only input, adding autoCapitalize="characters" seems to work on Android by setting the keyboard to be upper case by default. One can hit the shift key and then type a lower case letter.

To ensure that we only let the user enter (and see) upper case letters, I thought that I might be able to handle it by ensuring that when we update the react state of the component we capture the text in upper case.

By using a toUpperCase on top of what is a pretty standard state update cycle (i.e. a very similar update method ala the examples at https://facebook.github.io/react-native/releases/next/docs/textinput.html ), this saves the input into the state, uppercased, ready for the next render cycle. (I'm not concerned about the dangers of toUpperCase at this point.)

Unfortunately, the behaviour is a bit strange when you start typing both upper and lowercase letters, where you start getting repeated letters, e.g. if I type AbC, I will end up with ABABC, AbcdE I get ABABCDABABCDE.

Reproduction

I created an example app here: https://rnplay.org/apps/t-gBOA Note that the behaviour seems fine on the iOS simulator, but is 'wrong' on the android simulator.

or see the component below:

import React, {Component} from "react";
import {View, TextInput} from "react-native";

export class UpperCaseTextEntry extends Component {
    
    constructor() {
        super();
        this.state = {
            text: ""
        }
    }
    
    upperCaseIt(text) {
        var textUpperCase = text.toUpperCase();

        this.setState({text: textUpperCase});
    }
    
    render() {
        var text = this.state.text;
        return (
            <View>
                <TextInput value={text} autoCapitalize="characters"
                           onChangeText={(text) => {this.upperCaseIt(text)}}
                />
            </View>
        )
        
    }
}

Solution

I suspect that there's something going awry with the syncing of state between the react state and the state of the underlying components, quite possibly some case-ignoring checks are being in some places, but not others.

Additional Information

• React Native version: 0.35.0
• Platform: Android
• Operating System: Windows (building/testing on windows)

I've also noted during that it's more than possible to fire multiple onChangeTexts before a render is triggered, which could lead to unexpected app behaviour. This could be expected unexpected behaviour though :-)

[kenmasters]

Are there any updates on these issue already? , I am also experiencing this.

[magneticz]

having same issue with lowercasing, every time a capital case character is entered, the text that is passed to onChangeText function contains exact duplicate of existing text plus last entered character. it happens only on android devices, on ios it works fine

[rob-64]

Experiencing same with lowercase.

RN: 0.39.2 Phone: samsung galaxy S7

[klaasman]

Any news on this issue?

[afilp]

I have exactly the same problem and cannot release without a fix...

RN: 0.42.3 Phone: Galaxy s6 edge

Is anybody working on this? Thanks.

[MSchmidt]

Same issue.

RN: 0.44.3 Phone: Galaxy S8

Cannot reproduce this in emulator, so maybe something Samsung specific?

[skabbes]

Since the rnplay link is broken, I have recreated it on Expo Snack here:

https://snack.expo.io/S1ksBZsEW

Samsung Galaxy S8 is breaking for me.

[andreiAndrade]

When I disable the "Predictive Text" at "Language and Input > Samsung keyboard settings" the issue is solved, but how to solve that programmatically? :/

[JumalDB]

Same issue

RN: 0.44.0 Phone: Samsung Galaxy S7 Edge

Any fix?

[sonikro]

Same issue. Phone: Samsung Galaxy S7 / Moto Z2 Play Keyboards: Samsung Keyboard (with predict), Swiftkey Keyboard and Google Keyboard RN: [email protected]

[renatoagds]

Same issue here. Phone: OnePlus 5 Keyboard: [email protected] RN: 0.46.2

[ollyde]

Same issue here. Android 7.0 emulator, google pixel hardware selected. RN: 0.46.2

[vko-online]

same for Samsung Galaxy @facebook ?

[danparker276]

What's the work around? Just don't use autocapitalize and your own?

[Pianist038801]

Experienced same issue. I thought that in Android onChangeText() is triggered multiple times or so. But after checking, it's not what I thought it would be. Totally no hint of solving the issues at this moment.

[conor909]

Same issue here. It seems to be on any android devices with swipe / SwiftKey keyboards turned on. I think this issue should be escalated as these keyboards come pre-installed on a lot of devices.

[williamoliveira]

Same issue, I was getting paranoid cause I couldn't find the reason For me it doesn't even matter if you set autoCapitalize or not

Do anyone know a workaround?

"react-native": "^0.46.1", Xiaomi Redmi Note 4 Google Keyboard

[ankitpopli1891]

I stumbled upon the same issue. Found out the autoCapitalize was not working due to fontFamily specified in style prop.

Seems like it was failing silently. Will update here, if I find anything else.

[avynarchuk]

Try to set autoCorrect to false and check if problem exist yet.

[MSchmidt]

It does. autoCorrect has nothing to do with it.

[M1chaelTran]

I have the same issue but found a workaround for my current needs.

The issue can't be re-produce via the simulator using your keyboard. However, if you use the onscreen keyboard, then you can see the text is duplicated.

For my case, since the user can't use a 'keyboard' except for the on-screen keyboard provided. In adding, it only became an issue when I use the text.toUpperCase() Thus, setting the text state in lower case and autoCapitalize="characters" seems to work fine for my case. Of course, if you do not want the user to ever be able to enter lowercase, then this is an issue.

PS: I specified a fontFamily in style and autoCapitalize still work as expected

[john1jan]

I am facing the same issue..

[john1jan]

Any update on this issue . I just tried to use toUpperCase on my textinput. Its dupllicates the characters.

[john1jan]

[tastafur]

Has anyone found a solution for this bug?, I have the same problem in all samsung that have the predictive language activated

[MedinaGitHub]

the problem is toUpperCase() , i use <TextInput autoCapitalize='characters' ...

[MSchmidt]

@MedinaGitHub of course the problem is the use of toUpperCase(). We use this to enforce uppercase and this causes this bug on Samsung devices.

[williamoliveira]

Not only Samsung

[BrunoJAzevedo]

Not only Samsung devices and I have the same behaviour with toLowerCase()

[kasterlod]

try this: https://github.com/nikolaiwarner/react-native-text-input-reset