Open rogerbright opened 5 years ago
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.
Shouting into the wind! Hope the next person can use this as a basis for reporting the issue.
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.
Unable to replicate: https://snack.expo.io/@jkcooper/rn-issue-#23578---textinput-on-change
Still happening on latest release. I've updated the react-native info
text in the description.
@rogerbright is this happening in emulator, or on device?
Tested just now on both an emulator (Nexus 5X API 28) and an actual device (Galaxy Tab A SM-T580). Same results on both.
Would you be able to setup a snack demonstrating this issue? On Mar 2, 2019, 8:46 AM -0500, rogerbright notifications@github.com, 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.
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.
@rogerbright ty I will take a look at this!
I am facing the same issue. I have explain the isuue here https://github.com/facebook/react-native/issues/23663#issuecomment-471537331
@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.
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.
this happens with setNativeProps directly as well: https://github.com/facebook/react-native/issues/24409
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).
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
Any ideas for a workaround?
You could mess around with a Math.random() key for the input field. This blurs the focus after each keystroke though, so you'd have to write code to re-focus and move the cursor to the end. Personally, I no longer modify the input at all on Android, and instead just do the all-caps (or whatever) on the back end before saving to the DB. Not the best user experience. It's too bad the RN team seems uninterested in fixing pretty major issues like this one, and instead seems to spend their time making breaking changes to APIs, moving things arbitrarily out of the core APIs, etc.
method: <TextInput autoCorrect={false} />
@slavikdenis @rogerbright @thymikee @umair-khanzada I have two different solutions. They aren't exactly adequate for all scenarios. Text selection being one of them. But hopefully they will be of some use: https://snack.expo.io/@509dave16/android-text-input-out-of-sync-solutions
A text input component that displays a mask over the actual text input. And a text input that extracts the correct value from the onChangeText, which is providing an out of sync value from the native side.
@hramos I have created a new more up to date issue on this. If you would like for de-duplication purposes, I could move all of the content from this #26017 over here to a comment. Let me know what you think.
When attempting to ignore certain characters by controlling the state value that's passed to the TextInput, the TextInput's natively held value get's out of sync. This makes it impossible to enforce a particular text pattern at the time of a user entering the text. This exact issue was occurring before React Native 57.1 on iOS, as noted here in this now closed issue #18874 .
onChangeText
event handler that will selectively choose to not update the state value(which control's the TextInput's natively stored value). For example, let's say uppercase letters like 'A', 'B', 'C', etc...Exists in react-native 0.59.10
too.
I am not sure if this would also work on IOS, but it solved the problem for me on Android. The answer is quite simple: NEVER use value when rendering a TextInput
. Use defaultValue
instead.
If this turns out to really fix the issue for every platform, maybe we could just issue a warning every time someone uses value
as a prop to TextInput
.
UPDATE: I've tried this in iOS, and it also works.
@lgenzelis, thanks! So what value
is good for again?
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.
This is still affecting me.
yeah this is still an issue as far as i know
defaultValue
doesn't solve the problem. If you want to mask user inputs and show user masked inputs, still have to use value prop.
Still an issue.
Still seeing this over here as well.
This issue still persists. This is a pretty serious issue for inputting text and there is no special workaround except make a specific event triggering component (like a button) to ensure the textchange happens correctly. Using onEndEditing and oneSubmitHandler also doesn't do anything. Please correct this soon.
Still present in "v0.63.2" which was released couple days ago. @hramos
Came across the same issue. I wanted to replace the Arabic numerals with English numerals. As @rogerbright mentioned, I ended up using Math.random() key to TextInput (unacceptable workaround though). In my case, users rarely types Arabic numerals. The below code replaces ٠ with 0 and ١ with 2 and so on.
import React, { useState, memo, useRef } from 'react';
import { TextInput } from 'react-native';
//TEST
// const mapping = {
// '0': 'A',
// '1': 'B',
// '2': 'C',
// };
const mapping = {
'٠': '0',
'١': '1',
}
const updateValue = (val) => {
if (!val) return val;
const keys = Object.keys(mapping);
const regexExpr = new RegExp(keys.join('|'), 'gi');
if (val.match(regexExpr)) return val.replace(regexExpr, (matched) => mapping[matched]);
return val;
};
export default memo((props) => {
const [key, setNewKey] = useState(null);
const refContainer = useRef(null);
const onChangeText = (val) => {
if (props.onChangeText) {
let newVal = updateValue(val);
if (newVal != val) {
setNewKey(`key_${Math.random()}`);
setTimeout(() => {
refContainer.current.focus();
}, 50);
}
props.onChangeText(newVal);
}
};
let randKeys = {};
if (key) randKeys = { key };
return <TextInput {...randKeys} {...props} ref={refContainer} value={props.value} onChangeText={onChangeText} />;
});
Experience the same bug right now. Basically there is no way to implement something as simple as masked input.
Same here. Experiencing this with react-native-masked-input
.
(。•́︿•̀。)
same here on version "v0.63.2"
This problem was happening with my react-native App too. What I did is that I created an individual components outside the main component( where we will place this component) keeping TextInput as a whole(i.e according to our requirement that means what field do we need) in one single component. Passing the value as props to this component(if required) and changing it whenever we require using onChangeText. .The problem was solved in my App.
Hello ReactNative Developers! :smiley:
I just prepared Pull Request https://github.com/facebook/react-native/pull/29070 that seems to solve this issue
PREVIEWS OF THE BUGFIX
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| |
|
You can contact me by email at fabrizio.developer@gmail.com
Please head over to the Pull Request https://github.com/facebook/react-native/pull/29070 and thumbs up if you like it. If you want to get this fix you can follow the instructions for building ReactAndroid or checkout my video introduction on forking react-native (patch-package does not work).
If you don't like the pr please feel free to leave a code review or comment, I'll be happy to add improvements and changes.
Thanks a lot :pray: :peace_symbol: :beach_umbrella:
@fabriziobertoglio1987 You are awesome! Thank you so much.
What I got to work on Android while @fabriziobertoglio1987's PR is open. I want text input to be uppercased. autoCapitalize='characters'
works on iOS but there needs to be some additional properties so android doesn't jumble keystrokes
<TextInput
autoCorrect={false}
autoCapitalize={Platform.OS === 'ios' ? 'characters' : undefined}
secureTextEntry={Platform.OS === 'ios' ? false : true} // Add this for android to prevent duplicate keystrokes
keyboardType={Platform.OS === 'ios' ? undefined : 'visible-password'} // Add this for android to prevent duplicate keystrokes
defaultValue={code} // Use `defaultValue` instead of `value`
onChangeText={(text) => setCode(text.toUpperCase()) }
style={styles.textInputLarge}
placeholder="enter code"
returnKeyType="send"
textContentType="oneTimeCode"
maxLength={6}
/>
I'm having the same issue having to "format" the user input into an uppercase format. In my case the problem was solved using autoCorrect={false}
.
It was indeed a very weird problem, very hard to debug and hard to search for (I found this thread after quite some researching - probably I need to work on my google ability).
Thank you @fabriziobertoglio1987 for working on a fix.
Please, is it possible to merge this PR in the next version ?
To answer the question of when the pr https://github.com/facebook/react-native/pull/29070 which fixes this issue will be released in the next version of React Native, I suggest you to follow the discussions at https://github.com/react-native-community/releases/issues by subscribing to those threads. The process of releasing a new version with a bug fix is the following:
Same here on version "v0.68.1" in both platforms
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.
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?
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.
I look again into this when I have more free time. I need to update my PR with the improvements included in https://github.com/facebook/react-native/pull/33468. For this reason https://github.com/facebook/react-native/pull/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.
🐛 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: https://github.com/facebook/react-native/issues/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 in1234
showing up; enteringABCD
results inABCD
showing up; but enteringabcd
results inAABCAABCD
.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
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