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: react-native@0.47.1

[renatoagds]

Same issue here.
Phone: OnePlus 5
Keyboard: Fleksy@8.4.6
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

[lucassouza16]

um colega levantou esta questão hoje em um grupo do FB... o bug ainda existe?

Yes

[Fortidude]

Hello from 2023 :D

[batazo]

In 2027 I will be fixed

[ace-builds]

Any solution to this yet?

[hugoassisj]

Any real solution for this?

[efstathiosntonas]

Hey folks, there's an open PR for this

[NazarB99]

Any real solution for this?

found only this solution, add these props to your TextInput

autoCapitalize="none"
secureTextEntry={true}
keyboardType={"visible-password"}

[ybf970928]

Any real solution for this?

found only this solution, add these props to your TextInput

autoCapitalize="none"
secureTextEntry={true}
keyboardType={"visible-password"}

yes, work on 0.64

[lunaleaps]

I'm trying to verify this issue on 0.72 but I can't reproduce with this functional component:

function UpperCaseTextEntry() {
  const [text, setText] = React.useState('');
  return (
    <View>
      <TextInput
        value={text}
        autoCapitalize="characters"
        onChangeText={t => {
          const uppercase = t.toUpperCase();
          setText(uppercase);
        }}
      />
    </View>
  );
}

Same with this version of the original repro

class UpperCaseTextEntry extends Component<{}, {text: string}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      text: '',
    };
  }

  toUpperCase(text: string) {
    this.setState({text: text.toUpperCase()});
  } 

  render() {
    return (
      <View>
        <Text>My Attempt 2</Text>
        <TextInput
          value={this.state.text}
          autoCapitalize="characters"
          onChangeText={t => this.toUpperCase(t)}
        />
      </View>
    );
  }
}

Is anyone able to reproduce with either of the above?

screencap-2023-07-13T021531.477Z.mp4

[seba9999]

I'm still experiencing this 😢

I mean I still have the duplicated letters... Not the short "blink" of an uppercase as @fknives mentionned HERE

const [text, setText] = React.useState('');
<TextInput
  value={text}
  autoCapitalize="characters"
  onChangeText={t => {
    const uppercase = t.toUpperCase();
    setText(uppercase);
  }}
/>

It -only- happens when I use the "shift" key to toggle back to LowerCase on the keyboard
( Because the autoCapitalize="characters" force it to be uppercased by default.)

I mean that the duplication happends only when the letter typed is a lowercase one ... ( thus .toUpperCase() does something )

But does this code shouldn't work without the props autoCapitalize at all ? Which is not the case !

Running on :

• expo SDK 49 which should be RN 0.72.4 then

[fknives]

@seba9999 Sadly, I made a mistake in my pull request and it had to be reverted.
I created a new one (which you linked) which should resolve the issue without the previous mistakes.

However, that is still waiting for review and merge (understandably since I made a pretty big mistake int he first one). So the issue is not resolved until that is merged. (Or until someone else's solution is merged before that)

[unyo]

@lunaleaps I've encountered this issue on 0.64 but only on a Samsung device (via QA), and with "predictive text" enabled. On my Pixel 2XL, it runs a different keyboard and there isn't a way to turn on predictive text afaik, so there isn't a way to repro (looking at your video, it looks more like my Pixel keyboard rather than the Samsung keyboard). Turning off predictive text seems to fix the issue, as per:

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

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

Could you try repro'ing using a Samsung device?

I haven't read enough of the codebase to contribute yet, but so far the behavior looks most similar to this breakdown of the situation: #11068 (comment)

EDIT: Apparently samsung has an emulator online that has the Samsung keyboard (android emulator uses AOSP keyboard even on Samsung Tab S3) https://developer.samsung.com/remotetestlab/webclient/

I used this to test my stuff, I think maybe it either has something to do with the style textTransform: 'uppercase' (which transforms the actual value of the TextInput rather than it being a display transformation like in the browser, or it has something to do with doing .toUpperCase() inside onChangeText (I was able to transform the text within value={text.toUpperCase()}). I don't have a Samsung device and I have limited credits so I'm not able to look into this further.

Solution:

onChangeText = (text) => {
  this.setState({ text })
}
render() {
  return (
    <TextInput
      onChangeText={this.setChangeText}
      autoCapitalize="characters" // this doesn't capitalize the text, but in iOS and Samsung it sets the keyboard to caps mode. in Pixel it doesn't, so we still need to uppercase it manually. its not necessary but I keep it in here because I like not having a flash of lowercase
      value={(text || '').toUpperCase()}
      maxLength={6} // you can probably truncate in render too using .slice(0, 6), but idk, this is what I use
    />
  )
}

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

[efstathiosntonas]

@fabriziobertoglio1987 are all these PRs included in the react-native-improved repo? 🤔

[fabOnReact]

I added PR #29070 to my todolist.

@fabriziobertoglio1987 are all these PRs included in the react-native-improved repo? 🤔

I will work on this issue and publish the solution. I will keep the community updated on the progress. Thanks for the support.

[efstathiosntonas]

great, thanks Fabrizio. There are soooo many open prs around TextXX. I have pinged meta team in a pre-release discussion about all of them but they decided to not include anything 🤷‍♂️ at that time. I’ll find the list and I’ll open an issue on react-native-improved.

[fabOnReact]

great, thanks Fabrizio. There are soooo many open prs around TextXX. I have pinged meta team in a pre-release discussion about all of them but they decided to not include anything 🤷‍♂️ at that time. I’ll find the list and I’ll open an issue on react-native-improved.

Thanks @efstathiosntonas.

1. To be included in the facebook/react-native release, the PR needs to be merged in main branch. We need a commit hash
2. Meta uses react-native in Facebook Marketplace and other apps. Facebook Marketplace uses the main branch from facebook/react-native
3. For this reason, it is hard to merge the PR in main branch. Meta react-native team also has limited resources to review and merge every PR.

Using inheritance, I can apply patches to react-native Text or TextInput component without building from source.

For example, I applied PR #41770 (Issue #39722) to react-native-improved using inheritance with ReactTextView, ReactTextViewManager and ReactTextShadowNode.

The project is a now proof of concept. I plan to complete the project in 1-2 months, for this reason I'm currently preparing a list of tasks with different priorities.

[fabOnReact]

This PR is included in the react-native-improved library:

react-native-improved

• Supports ONLY react-native 0.73.
• Supports only old architechture (new architechture is WIP)

Set-up

In package.json

 "scripts": {
+  "postinstall": "yarn run react-native-patch"
 }

Then

npm

npm install react-native-improved --save-dev

yarn v1

yarn add react-native-improved --dev

[SamGeodynamics]

for people still having this issue on android, see if you disabled the keyboard setting "auto-capitalize first letter", found this out when 2 stock phones worked but my personal device didn't auto-capitalize, drove me nuts :-)

if you enable it again (the default setting), the option started working on my device. still not entirely a fix but at least I know where it bugged out.