[TextInput] Auto correction doesn't call onChangeText after submit

[michalraska]

Hi,
when I write to TextInupt some typo, e.g. "awrsome" and tap submit, in text input is displayed awesome but this change doesn't call method set to property onChangeText.

[brentvatne]

@dsibiski - ping

[dsibiski]

@michalraska There is my attempt at solving this issue. 😄 I was hoping the fix would be simpler, let's hope the core team likes the solution.

[chrisbianca]

Hi,
Is there any progress on this? Although not major, it has the potential to become quite annoying from a user's point of view.

[RyGuyM]

+1

[joonhocho]

+1

[kuoliangkwong]

+1

[sreucherand]

+1

[andrewhl]

+1

[tomazahlin]

+1. Any news? If commit fixes things, can we get this merged soon?

[hramos]

This is being addressed by #9852, which has not yet landed.

[elsehow]

Any updates on merging #9852?

[shergin]

This issue was fixed in a341e9d and 9a9ecea.

[grundmanise]

@shergin RN 0.42 [iOS] - onChange still does not called after autocorrect

[shergin]

@grundmanise That's sad. :(
Does .42 contain a341e9d and 9a9ecea?
Which kind of TextInput (multiline on single-line)?

[grundmanise]

@shergin
I think so.. it should contain.
It's a single-line input (controlled component) with autoCorrect={true}.
Tested on iPhone 5s.

Haven't you got any issues with onChange & autoCorrect?

[rohitgoyal]

Any update on this?

[Ashoat]

I'm seeing this as well on 0.44.0.

[antseburova]

+1

[adroste]

+1 0.45.1

[ethanyanjiali]

+1 This issue also affect Chinese input which use same technology with autocorrect. And there may be more foreign keyboards are broken. Please help us ASAP. My current workaround is to only take values when blur. Thanks.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[rohitgoyal]

Just tested it with version 0.48 and this bug still exists. It is a very serious bug and should be resolved.

[Ashoat]

@rohitgoyal, I agree. Your best bet at this point is to open a new issue, and link to this one. Commenting on the closed one won't get any attention.

[shergin]

The issue is real and we still have to fix this.

[kevin91liu]

@rohitgoyal Do you have an example that reproduces this? I just attempted to reproduce this on 0.48.4 but couldn't.

We're currently using 0.41.2 and encountered this bug. Planning to upgrade versions and hoping that it'll solve this, but it appears it isn't fixed yet? @shergin is there an estimate on when this might be fixed?

[kevin91liu]

In the meantime, I thought of a workaround that seems to work (but please let me know if there's a flaw). Basically, in your onSubmitEditing callback, have it first call your onChangeText callback. At that point, it will have the autocorrected string "awesome" instead of "awrsome".

  onChangeTextCallback = (text) => { /* do stuff */ }
  onSubmitEditingCallback = (e) => { /* do stuff */ }

      <TextInput
        onChangeText = {onChangeTextCallback}
        onSubmitEditing = {(e) => {
          onChangeTextCallback(e.nativeEvent.text);
          onSubmitEditingCallback(e);
        }}
      />

[Is0metry]

@kevin91liu I'm trying your solution now and it doesn't seem to fix the problem.

[kevin91liu]

Got a code snippet to share @Is0metry ? It worked for me, but I didn't test it thoroughly.

[Is0metry]

@kevin91liu
Here are my callbacks:

 onChangeTextCallback = (event) => {
    this.setState({
      ['text']:event
    });
  }
 onSubmitEditingCallback = (event)=> {
    const todos = this.state.todos.slice().concat([{key:this.state.text}]);
    this.setState({
      todos:todos,
      text:'',
    });
  }

and my text box rendering:

    return(
     //rendering of FlatList
      <NewTodo style={styles.input} value={this.state.text} onSubmitEditing={(e) => {
        this.onChangeTextCallback(e.nativeEvent.text);
        this.onSubmitEditingCallback(e);
      }} onChangeText={this.onChangeTextCallback}/>


      </View>

   );

NewTodo basically just a <Text> component encapsulated in a <View> so I didn't think it was important. Behavior is exactly the same as it would be without the additional measures taken.

[kevin91liu]

@Is0metry I think you meant to say that NewTodo is a wrapper for a TextInput component inside a View right?

I think I know what the problem is. React's setState is asynchronous, so when you call setState, you can't expect the state to have immediately changed by the next line of code. For more details, see here: https://reactjs.org/docs/react-component.html#setstate

So what I think is happening in your example is:

1. Suppose state.text is currently "awrsome", and the user autocorrects it to "awesome"
2. You call this.onChangeTextCallback(e.nativeEvent.text); and here, e.nativeEvent.text='awesome' (the auto-corrected text, just as an example). It makes a call setState({text: 'awesome'}).
3. Next you call this.onSubmitEditingCallback(e);
4. Inside that function, you execute const todos = this.state.todos.slice().concat([{key:this.state.text}]);, but this.state.text is still "awrsome" and hasn't been updated to "awesome" yet

For your case, I'd suggest trying the following and see if it fixes things:

 return(
     //rendering of FlatList
      <NewTodo 
        style={styles.input} 
        value={this.state.text} 
        onSubmitEditing={(e) => {
          this.setState({
            text: e.nativeEvent.text
          }, () => {
            this.onSubmitEditingCallback(e);
          });
        }} 
        onChangeText={this.onChangeTextCallback}
      />

      </View>

   );

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[kevin91liu]

I believe it should remain open because it can result in users entering in different text than they believe.

[hramos]

This appears to be fixed in v0.54.0:

⚡️ Text and TextInput have been re-implemented from the ground up for performance, flexibility, and reduced technical debt (2716f53, ef4214a, 0009909, 74963eb, 6c4ef28, ebc9884, d7fa81f, 7d1ec7a, 5264832, 6bb8617, 5dbb3c5, 7e7d00a, 46fd864, 9dfa2e7, 8a882fe, and 0f9fc4b by @shergin and @hovox)

[ergunyasar]

I'm using 0.54.2 and issue continues @hramos . lastNativeText, nativeEvent.text, this.state.text doesn't update with autocorrect. onChange and onChangeText doesn't fire

[ergunyasar]

and confirmed this bug exists in 0.55.2 as well

[Skn0tt]

This is pretty annoying, especially in e2e testing this can confuse a lot.
Is there a timeline for the fix? If it is not deep into the codebase, I could have a look into it.

[hramos]

Hey folks, this issue is closed as fixed. I highly recommend opening a new issue instead of commenting on here, since we'd like to see why your particular use case is not resolved.