[TextInput] [android] setNativeProps({text:<string>}) repeats characters

[danielneal]

🐛 Bug Report

Setting the text of a TextInput on Android via setNativeProps({text:<string>}) repeats existing characters

iOS	Android

To Reproduce

Add a TextInput in Android and capture a ref to it. Add an onChangeText handler to the TextInput, and in this, set the text of the input to some function of the current text.

As characters are typed into the input, the text will repeat previously input characters in addition to the value of the string used in setNativeProps.

Expected Behavior

Setting the text via setNativeProps({text:<string>}) should set the text of the input to just <string> with no repeated characters.

Code Example

On latest react native, via react-native init

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

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={{paddingTop:200}}>
                <TextInput style={{width:"100%",backgroundColor:"yellow"}}
            ref={(r)=>this.textInputRef=r} onChangeText={(t)=>this.textInputRef.setNativeProps({text:t.toUpperCase()})}>
                </TextInput>
            </View>);
    }
}

Link to snack:
https://snack.expo.io/Hk-z-q3FV

Environment

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 216.29 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
Yarn: 1.12.3 - ~/.yarn/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.15.1/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 25.0.3, 28.0.3, 29.0.0
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 2.3 AI-162.3871768
Xcode: 10.2/10E125 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.4 => 0.59.4

[hooorvat]

The same problem occurred when using toUpperCase() or toLowerCase() and the entered value !== tranformed

[utkarsh-dixit]

I'd like to work on this issue.

[kmagiera]

why don't you update input value via value prop of TextInput component? TextInput is a controlled component and it is expected that you provide the changed text with value prop, which means that you should store either original or transformed text in the component state

[hooorvat]

@kmagiera This bug is manifested not only when using setNativeProps. Initially, I found it in conjunction with redux-form, when simply converting all characters to uppercase (inside the library tried the normalize method and also inside onChangeText). Then tried to repeat the same through setState in OnChangeText without redux-form and this problem remained. And it appears, as far as I remember, when there are only letters in the line. When there are also figures, like the problem was not. That is, if we enter "ASb", onChangeText will call setState with value = "ASb".toUpperCase(), the text is duplicated

[dulmandakh]

It think that using setNativeProps for this purpose is wrong, and you should be doing something like below. Closing this issue.

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

type Props = {};
export default class App extends Component<Props> {
    state = {
      text: ''
    }

    render() {
        return (
            <View style={{paddingTop:200}}>
                <TextInput
                  style={{width:"100%",backgroundColor:"yellow"}}
                  onChangeText={text=> this.setState({ text: text.toUpperCase() })}
                  value={this.state.text}
                />
            </View>);
    }
}

[danielneal]

@dulmandakh I'm really sorry, but the example you posted also exhibits the same bug https://snack.expo.io/HJhmOGAtN

I think something is wrong somewhere.

Is it going to be a problem to keep the issue open?

[dulmandakh]

I can reproduce the issue, thank you.

[dulmandakh]

but only with toUpperCase(), without it the app just works.

[danielneal]

Thanks @dulmandakh :)

Yes, you are right - without toUpperCase, both methods seem to work.
The bug only happens when there is some transformation of the input (as @hooorvat says)

It does not necessarily have to be toUpperCase(), for example, this example that redacts vowels has the same problem https://snack.expo.io/BkbQrVCtN - again - only in android.

Interestingly, if there are numbers at the beginning of the string, the problem doesn't happen.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[RobPando]

I am running across this issue now, I am uppercasing the string via style textTransform: "uppercase" and it is corrupting the value, exactly as shown on the GIF. Is there a fix for this coming?

[anees-syook]

This issue is still happening in react-native 0.59.10

<TextInput
   name={name}
   value={value}
   returnKeyType={'done'}
   autoCorrect={false}
   onChangeText={value => onInputChange(name, value.toUpperCase())}
   onBlur={() => onInputBlur(name)}
/>

[mtsdnz]

This is also happening on 0.61.2, with textTransform="uppercase".

[mdbaniani]

i've been receiving the same bug report from a couple of users and didn't know where it is lying until i viewed this issue. yes i "am" also transforming the text somehow and i can also confirm that the problem occurs when characters are being typed rather than numbers. but i'm definitely sure the problem occurs only on specific devices not all of them (apparently android version has nothing to do with the issue). using RN 0.57 at the moment

[YogendraShelke]

Facing same issue on Android for below environment

System:

• OS: macOS 10.15
  

• CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  

• Memory: 558.29 MB / 16.00 GB
  

• Shell: 5.7.1 - /bin/zsh
  

Binaries:

• Node: 8.16.1 - /usr/local/bin/node
  

• npm: 6.11.3 - /usr/local/bin/npm
  

• Watchman: 4.9.0 - /usr/local/bin/watchman
  

IDEs:

• Android Studio: 3.5 AI-191.8026.42.35.5900203
  

• Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  

npmPackages:

• react: 16.9.0 => 16.9.0 
  

• react-native: 0.61.5 => 0.61.5 
  

npmGlobalPackages:

• react-native-cli: 2.0.1
  

[YogendraShelke]

<TextInput secureTextEntry keyboardType="visible-password" ...... />

Worked for me

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[lfoliveir4]

<TextInput secureTextEntry keyboardType="visible-password" ...... />

Worked for me

not work on iOS: React native 0.63.4

[lordprana]

I'm encountering this issue on Android on react-native 0.64.3.