TextInput's onKeyPress and onChangeText order of execution is inconsistent across platforms - iOS and Android

[yuliankarapetkov]

Description

onKeyPress is being called before onChangeText on iOS and after it on Android.

React Native version:

0.63 (Expo SDK 41) - see Snack

Expected Results

Order of execution should be the same across platforms, e.g. onKeyPress should always occur first, regardless of the OS.

Snack, code example, screenshot, or link to a repository:

Snack example

[bychung]

Same issue here.

[ngasull]

Still an issue in react-native 0.64.3 with expo 43.

This really surprises me because it makes many editing behaviors basically impossible with react native like having a multiline input with custom behavior when pressing return.

Does anybody have more insight or a real workaround for this?

[jbrowning]

Still an issue on react-native 0.67.3

[landabaso]

Still an issue on react-native 0.69.

As a workaround you can defer the call for the next execution thread:

<TextInput>
    onChangeText={text => {
      setTimeout(() => onChangeText(text), 0);
    }}
</TextInput>

Although it's flickery. A better alternative is to keep track of an additional deferred variable deferredText and use that one in onKeyPress:

  const [text, setText] = React.useState('');
  const [deferredText, setDeferredText] = React.useState('');

with:

  <TextInput>
    value={text}
    onChangeText={onChangeText}
    onKeyPress={onKeyPress}
  </TextInput>

and:

  const onChangeText = newText => {
    if (newText !== text) setText(newText);
    setTimeout(() => {
      if (newText !== deferredText) setDeferredText(newText);
    }, 0);
  };

  const onKeyPress = ({nativeEvent}) => {
       //Here you can use deferredText instead of text to have similar behaviour in Android, Web & iOS.
       //If you want, you can use deferredText only on Android and text in other platforms. But using deferredText works just fine across all platforms I tested.
  }

[github-actions]

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.

[fabOnReact]

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

[longb1997]

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

i still see it, please update a patch
Thank you