TextInput value can't be change during onChangeText [iOS]

[jerameel]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

TextInput's value property does not seem to get in sync when changing state via onChangeText.

An example use case would be blocking non numerical characters from the input.

This works on Android though.

Environment

OS: macOS High Sierra 10.13.3
Node: 8.10.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4697961

react: ^16.3.0-alpha.1 => 16.3.0-rc.0
react-native: 0.54.3 => 0.54.3

Expected Behavior

TextInput value should be equal to state value even when it is modified during onChangeText.

Actual Behavior

TextInput value is not being modified.

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[Kaniz92]

I also have the same issue, any luck?

[rplankenhorn]

I am seeing a similar issue where I can't filter undesired characters from JS. I attempted to use the changes in the PR I tagged but I saw some issues:

The problem is that if you are using onChangeText to do text validation, it will briefly show the undesired character before removing it from the TextInput.

I don't know much about the React Native source code but after taking a brief look at the code, I think there might be a problem in textInputShouldChangeTextInRange in RCTBaseTextInputView.m. I think we should be preventing the text from being added until it comes in via the prop. Not entirely sure.

[jerameel]

It seems on iOS, value property is not the one prioritized, instead it shows the actual value typed in. Isn't this supposed to be the same with both platforms?

OT: Why is this getting tag with "needs more information" while I already had it in the first place.

[rplankenhorn]

@shergin @PeteTheHeat @cbrevik Any thoughts? Looks like you are the three that contributed most to RCTBaseTextInputView.

[rplankenhorn]

I did some more digging and may have found a temporary fix for my project:

I noticed that onTextInput is a prop that isn't documented anywhere but it's still fired. In RCTBaseTextInputView.m, towards the end of - (BOOL)textInputShouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text, it does an if check to see if this prop has been passed in and if so, fires the event and outside of the if statement, it returns YES to allow the characters to be added.

For my fix, I just returned NO inside of the if (_onTextInput) check to prevent characters added in before I could do validation. I also pass _predictedText for text inside of the event instead of text. This allowed for me to do data validation in the JS layer and then set the new text via props.

I don't think I will be PRing this to React Native since it doesn't seem like a universal fix. Here is the diff if anyone is interested:

diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.m b/Libraries/Text/TextInput/RCTBaseTextInputView.m
index d9c47ff16..494d1715e 100644
--- a/Libraries/Text/TextInput/RCTBaseTextInputView.m
+++ b/Libraries/Text/TextInput/RCTBaseTextInputView.m
@@ -276,7 +276,7 @@ - (BOOL)textInputShouldChangeTextInRange:(NSRange)range replacementText:(NSStrin
 
   if (_onTextInput) {
     _onTextInput(@{
-      @"text": text,
+      @"text": _predictedText,
       @"previousText": previousText,
       @"range": @{
         @"start": @(range.location),
@@ -284,6 +284,8 @@ - (BOOL)textInputShouldChangeTextInRange:(NSRange)range replacementText:(NSStrin
       },
       @"eventCount": @(_nativeEventCount),
     });
+    
+    return NO;
   }
 
   return YES;

[imanderson]

+1

[zaguiini]

Thanks, @rplankenhorn . It works for now. You should submit a PR...

[rplankenhorn]

@zaguini Glad it works for you! I am hesitant to submit a PR because it doesn't fix the underlying issue. onTextInput is undocumented and has been around since very very early on in the project.

I know TextInput was just re-written but I think we all need to think about what is the best solution. It could be something as simple as adding an additional prop to TextInput called requiresValidation that forces textInputShouldChangeTextInRange to return no and wait for the text to be updated via the text prop. I am not sure.

I can try to come up with a better solution and submit a PR but I am swamped at work currently.

[zaguiini]

Yeah it should be ideal to mantain the React Native's TextInput API... onChangeText and onChange instead of onTextInput... A lot of compos rely on those previous cited methods.