Can't modify text in TextInput onChangeText callback on Android #23578

rogerbright · 2019-02-21T19:17:02Z

🐛 Bug Report

On Android, modifying the text within the onChange (or onChangeText) callback causes corruption of the text in the TextInput. (Not tested on iOS.)

For example, I'm trying to force all caps in my TextInput field. (This is to work around the react native autoCapitalize issue described here: #8932). So if a lowercase letter is entered, I change it to uppercase in the callback. Unfortunately, alternate keystrokes cause the entire previous text to be duplicated, but only if the entered keystroke was lowercase.

So, when forcing all caps, entering 1234 results in 1234 showing up; entering ABCD results in ABCD showing up; but entering abcd results in AABCAABCD.

This issue disappears if assigning a Math.random() key to the TextInput; but then of course so does the keyboard focus, making this an unacceptable workaround.

To Reproduce

See "Bug Report" and "Code Example" sections.

Expected Behavior

One should be able to modify the value inside TextInput's change callbacks, without the text becoming corrupted on the subsequent redisplay.

Code Example

export default class TestScr extends Component
{
  constructor(props)
  {
	super(props);
	this.state = { s6: '' };
  }
  textchg(event)
  {
	const {eventCount, target, text} = event.nativeEvent;
            // one would expect the contents of s6 to display after the redraw
	this.setState({ s6: text.toUpperCase() }); 
  }
  render()
  {
            // [same behavior if using onChangeText instead of onChange]
	let jsx0 = <View style={{ flexDirection: 'row' }} key={ 'hi' }>
		<TextInput placeholder={ 'hello' } value={ this.state.s6 }
			onChange={ (evt) => this.textchg(evt) }
			keyboardType={ 'default' } />
		</View>;
		
	return (<View style={{ backgroundColor: '#ffffff', padding: 10, }}>
		<ScrollView style={{ backgroundColor: '#ffffff', }}>
			{ jsx0 }
		</ScrollView>
	</View>);
  }
}

Environment

React Native Environment Info:
System:
OS: Linux 3.19 Ubuntu 14.04.3 LTS, Trusty Tahr
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Memory: 626.14 MB / 15.38 GB
Shell: 6.18.01 - /bin/tcsh
Binaries:
Node: 8.11.3 - /usr/bin/node
npm: 5.6.0 - /usr/bin/npm
SDKs:
Android SDK:
API Levels: 10, 16, 23, 26, 27, 28
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-16 | ARM EABI v7a, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.6 => 0.58.6
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

The text was updated successfully, but these errors were encountered:

react-native-bot · 2019-02-21T19:25:18Z

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

rogerbright · 2019-02-21T20:06:46Z

Shouting into the wind! Hope the next person can use this as a basis for reporting the issue.

hramos · 2019-02-21T23:53:06Z

Sorry about that, but it's really important to make sure the issue is present in the latest release. We've had plenty of issues reported for bugs that have been fixed already.

For bug reports that have a minimal repro example, verifying on the latest version using a brand new project should not take a lot of effort.

CatapultJesse · 2019-03-02T00:03:38Z

Unable to replicate: https://snack.expo.io/@jkcooper/rn-issue-#23578---textinput-on-change

rogerbright · 2019-03-02T13:40:20Z

Still happening on latest release. I've updated the react-native info text in the description.

ericlewis · 2019-03-02T13:41:39Z

@rogerbright is this happening in emulator, or on device?

rogerbright · 2019-03-02T13:46:45Z

Tested just now on both an emulator (Nexus 5X API 28) and an actual device (Galaxy Tab A SM-T580). Same results on both.

ericlewis · 2019-03-02T13:49:47Z

Would you be able to setup a snack demonstrating this issue?

…

On Mar 2, 2019, 8:46 AM -0500, rogerbright ***@***.***>, wrote: Tested just now on both an emulator (Nexus 5X API 28) and an actual device (Galaxy Tab A SM-T580). Same results on both. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

rogerbright · 2019-03-02T16:01:32Z

Sure.

https://snack.expo.io/By1LO7uUV

In the snack interface, the bug appears only on Android. Works correctly on iOS. Make sure you enter only lowercase letters.

ericlewis · 2019-03-02T20:37:38Z

@rogerbright ty I will take a look at this!

umair-khanzada · 2019-03-11T13:36:21Z

I am facing the same issue.
I have explain the isuue here #23663 (comment)

rogerbright · 2019-03-13T18:35:59Z

@umair-khanzada your issue seems different. In my case, the callbacks are being called just fine... it's what happens when I modify the text that makes things screwy.

grabbou · 2019-03-19T11:56:08Z

Thanks @ericlewis for volunteering to fix it! I think this is really annoying and severe issue, but fortunately, it's not affecting many of our developers.

I am going to label this "mid-pri" while we are waiting for the PR.

brentvatne · 2019-04-11T15:14:02Z

this happens with setNativeProps directly as well: #24409

thymikee · 2019-04-11T16:51:08Z

Can confirm this also happens on RN 0.59 as well. Looks like I didn't need to modify controlled text input in a while, but when I did I remember using an overlay over transparent uncontrolled text input that would display the transformed text. I'd say it's pretty serious bug (and pretty old, happens at least since 0.57).

brentvatne · 2019-04-11T17:03:32Z

here's a video of a repro: https://streamable.com/j4s4r

and the code (i tested this on 0.57 and 0.59):

import * as React from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';

class ControlledInput extends React.Component {
  state = {
    value: '',
  };

  _handleChangeText = ({ nativeEvent: { text } }) => {
    this.setState({ value: text.toUpperCase() });
  };

  render() {
    return (
      <TextInput
        style={{
          width: 300,
          height: 50,
          padding: 10,
          backgroundColor: '#fff',
          borderWidth: 1,
          borderColor: '#eee',
          borderRadius: 2,
        }}
        onChange={this._handleChangeText}
        value={this.state.value}
      />
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ControlledInput />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

and a snack: https://snack.expo.io/@notbrent/ranting-sandwich

rogerbright · 2022-04-27T12:00:41Z

FWIW, I did end up solving this issue and many others. The solution starts with an "F" and rhymes with "butter." I realize that's not an option for everyone.

thomazcapra · 2022-04-27T13:53:20Z

FWIW, I did end up solving this issue and many others. The solution starts with an "F" and rhymes with "butter." I realize that's not an option for everyone.
Flutter doens't have this issue, right?

rogerbright · 2022-04-27T17:05:29Z

Correct. I'm only six months in but so far my impression is that Flutter/Dart is mature, well thought-out, concise, and free of sanctimony.

fabOnReact · 2022-04-27T19:18:34Z

I look again into this when I have more free time. I need to update my PR with the improvements included in #33468. For this reason #29070 is back to draft. We can not trigger setText in a ReactEditText. replace is used on purpose. Sorry for the delay in the development of this fix.

mathbalduino · 2022-10-24T18:57:01Z

Hey guys, any news on this one?

danielcrk · 2022-12-05T14:23:07Z

I guess not.

hieucd04 · 2022-12-16T02:56:35Z

+1

chancegraff · 2023-01-16T19:13:38Z

I'm seeing this on iOS but I suspect it's because of one of the packages I have installed.

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.3",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "expo": "^47.0.13",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "^1.4.2",
    "firebase": "^9.15.0",
    "immer": "^9.0.17",
    "jest": "^29.3.1",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-dotenv": "^3.4.7",
    "react-native-paper": "^5.1.3",
    "react-native-plaid-link-sdk": "^8.0.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-text-input-mask": "^3.1.4",
    "react-native-web": "^0.18.10",
    "zustand": "^4.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@types/react": "^18.0.26",
    "@types/react-native": "^0.71.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-root-import": "^6.6.0",
    "expo-cli": "^6.1.0",
    "typescript": "^4.9.4"
  },

saschagehlich · 2023-03-29T06:54:29Z

@chancegraff I have the same issue on iOS, were you able to fix this?

jcubic · 2023-07-03T10:28:30Z

The same issue on Android in Emulator. It works fine for the Expo playground so don't use it to test.

Simple reproduction:

const ControlledComponent = () => {
  const [state, setState] = useState('0.00');
  const cursor = 1;
  return (
    <TextInput
      ref={ref}
      autoFocus
      onKeyPress={() => { /* empty */ }}
      selection={{start: cursor, end: cursor}}
      value={state}
      keyboardType="numeric"
    />
  );
};

There is no way to prevent default behavior, event.preventDefault() also doesn't work. The input is always updated even if the component is controlled.

cihangir-mercan · 2023-08-12T15:09:23Z

The issue still persists on both IOS and Android

I try to limit decimal points to 8 length. The user sees 9th character shortly before removal. It causes flickery.

https://snack.expo.dev/N5IcDRFWc

fabOnReact · 2024-01-17T06:36:38Z

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

DanielO199 · 2024-01-19T14:48:25Z

Yes, this bug still occurs. Please take care of it

yuki384 · 2024-01-21T13:28:20Z

@fabOnReact
Yes, the issue still persists (on iOS). If you could tackle this, it would be incredibly appreciated!

mkhoussid · 2024-01-21T18:38:18Z

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

Kind of a hacky work around (and doesn't always work quite as expected):

const onChange = (e: string) => {
    if (isValidInput(e)) {
        textInputRef.current?.setNativeProps({ text: e });
    }
}

yuki384 · 2024-01-22T07:57:53Z

Kind of a hacky work around (and doesn't always work quite as expected):

const onChange = (e: string) => {
    if (isValidInput(e)) {
        textInputRef.current?.setNativeProps({ text: e });
    }
}

Thank you! I already tried that, but It's still flickering on device... It works fine on Simulator.
Incidentally, I would like to prevent type new lines.

mkhoussid · 2024-01-22T08:20:46Z

Kind of a hacky work around (and doesn't always work quite as expected):
const onChange = (e: string) => {
    if (isValidInput(e)) {
        textInputRef.current?.setNativeProps({ text: e });
    }
}
Thank you! I already tried that, but It's still flickering on device... It works fine on Simulator. Incidentally, I would like to prevent type new lines.

Can you try something like this?

. . .
const previousValueRef = React.useRef('');
. . .
const onChange = (e: string) => {
    if (textInputRef.current) {
        const textInput = textInputRef.current;
        textInput.setNativeProps({ text: previousValueRef.current });
        if (isValidInput(e)) {
            textInput.setNativeProps({ text: e });
            previousValueRef.current = e;
        }
    }
}
. . .

If you need to accept only integers and know your max length, there was a suggestion from this SO post:

<TextInput
  maxLength={MAX_LENGTH}
  keyboardType="numeric"
  value={value}
  onChangeText={(e) => {
    if (/^\d+$/.test(e)) setValue(e);
  }}
  placeholder="Type only numbers..."
/>

fabOnReact · 2024-02-04T02:01:55Z

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

yuki384 · 2024-02-05T02:27:39Z

Can you try something like this?

Thank you!
This did not work out well either. However, it might have been due to me including a Text component as a child of TextInput to finely control the style :

<TextInput ... >
  <Text>Some</Text>
  <Text style={{ ... }}>String</Text>
</TextInput>

For my case, I've decided to use a custom Native Module, but I'll give your solution a try another time.

react-native-bot · 2024-08-03T05:00:55Z

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

jcubic · 2024-08-03T11:46:17Z

A PR with a fix was created a year ago, I don't know what else I can do.

cortinico · 2024-08-03T14:24:36Z

A PR with a fix was created a year ago, I don't know what else I can do.

What's the PR?

jcubic · 2024-08-03T15:31:52Z

It was linked:

#38155

cortinico · 2024-08-03T16:43:00Z

It was linked:

#38155

That's an issue, not a PR

jcubic · 2024-08-03T17:08:20Z

That's an issue, not a PR

Ah sorry my mistake, I thought it was the issue where I created a PR for.

rogerbright added the Type: Bug Report label Feb 21, 2019

react-native-bot added Component: TextInput Related to the TextInput component. Platform: Android Android applications. Platform: Linux Building on Linux. Resolution: Old Version labels Feb 21, 2019

react-native-bot removed the Resolution: Old Version label Mar 2, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 2 #24029

Closed

grabbou added Priority: Mid and removed Platform: Linux Building on Linux. labels Mar 19, 2019

grabbou assigned ericlewis Mar 19, 2019

michalchudziak mentioned this issue Apr 15, 2019

[react-native-core] Can't modify text in TextInput onChangeText callback on Android callstack/react-native-open-source-board#5

Open

thymikee mentioned this issue Apr 25, 2019

TextInput flickering when format the text #24585

Closed

react-native-bot added the Bug label May 4, 2019

hramos removed the Type: Bug Report label May 6, 2019

juanmanso mentioned this issue Jun 12, 2023

feat: implement proper input handling for receive flow dominant-strategies/quaipay#101

Merged

jcubic mentioned this issue Aug 12, 2023

Can't prevent default input in TextInput in controlled component #38155

Open

fabOnReact mentioned this issue Jan 24, 2024

Fix letters duplication with autocapitalize #29070 fabOnReact/react-native-improved#16

Merged

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 3, 2024

react-native-bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 4, 2024

Can't modify text in TextInput onChangeText callback on Android #23578

Can't modify text in TextInput onChangeText callback on Android #23578

Comments

rogerbright commented Feb 21, 2019 • edited Loading

🐛 Bug Report

To Reproduce

Expected Behavior

Code Example

Environment

react-native-bot commented Feb 21, 2019

rogerbright commented Feb 21, 2019

hramos commented Feb 21, 2019 • edited Loading

CatapultJesse commented Mar 2, 2019

rogerbright commented Mar 2, 2019

ericlewis commented Mar 2, 2019

rogerbright commented Mar 2, 2019

ericlewis commented Mar 2, 2019 via email

rogerbright commented Mar 2, 2019 • edited Loading

ericlewis commented Mar 2, 2019

umair-khanzada commented Mar 11, 2019

rogerbright commented Mar 13, 2019

grabbou commented Mar 19, 2019

brentvatne commented Apr 11, 2019

thymikee commented Apr 11, 2019

brentvatne commented Apr 11, 2019

rogerbright commented Apr 27, 2022

thomazcapra commented Apr 27, 2022

rogerbright commented Apr 27, 2022

fabOnReact commented Apr 27, 2022

mathbalduino commented Oct 24, 2022

danielcrk commented Dec 5, 2022

hieucd04 commented Dec 16, 2022

chancegraff commented Jan 16, 2023 • edited Loading

saschagehlich commented Mar 29, 2023

jcubic commented Jul 3, 2023

cihangir-mercan commented Aug 12, 2023

fabOnReact commented Jan 17, 2024

DanielO199 commented Jan 19, 2024

yuki384 commented Jan 21, 2024

mkhoussid commented Jan 21, 2024 • edited Loading

yuki384 commented Jan 22, 2024

mkhoussid commented Jan 22, 2024 • edited Loading

fabOnReact commented Feb 4, 2024

react-native-improved

Set-up

npm

yarn v1

yuki384 commented Feb 5, 2024

react-native-bot commented Aug 3, 2024

jcubic commented Aug 3, 2024 • edited Loading

cortinico commented Aug 3, 2024

jcubic commented Aug 3, 2024

cortinico commented Aug 3, 2024

jcubic commented Aug 3, 2024

rogerbright commented Feb 21, 2019 •

edited

Loading

hramos commented Feb 21, 2019 •

edited

Loading

rogerbright commented Mar 2, 2019 •

edited

Loading

chancegraff commented Jan 16, 2023 •

edited

Loading

mkhoussid commented Jan 21, 2024 •

edited

Loading

mkhoussid commented Jan 22, 2024 •

edited

Loading

jcubic commented Aug 3, 2024 •

edited

Loading