React-native: TextInput order of events are inconsistent between iOS and Android

[lxcid]

TextInput event order are different for iOS and Android.

This inconsistency make certain operations hard to archive on Android:

• Detect backspace key on empty text input to delete the component. If only 1 character is left in the text, pressing backspace key will delete the text first before we process which key is pressed, which will make us assume that the text input is empty.
• Processing text on change text event before selection change event can cause crash due to invalid selection.

Environment

Tested on Expo 25.0.0/0.52.0, but original issue happen in 0.53.3 as well, Likely exist in 0.54.0

Expected Behavior

I think iOS order of events make the most sense and I hope Android can follow the suit.

Actual Behavior

The event in question are onChangeText(), onSelectionChange() and onKeyPress().

On iOS, the events are in the following order:

• key press
• selection change
• change text

On Android, the events are in the following order:

• change text
• selection change
• onKeyPress (See #18262)

Steps to Reproduce

https://snack.expo.io/Hk2qtCouf

[leighman]

https://github.com/leighman/react-native-text-input-selection-crash for reproduction of crash when setting selection and text at the same time.
Works fine on iOS.
Crashes on Android unless selection is set in the setTimeout.
Exists in 0.52 - 0.54 as far as I can tell.

[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.

[ilonashub]

happens in 0.55 as well.

[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.

[richgilbank]

FWIW, I made this Snack to help debug the onChangeText/onKeyPress before discovering this open issue:
https://snack.expo.io/BJM4Rf9Rf

On Android this logs in the following order:

• onChange
• onChangeText
• onKeyPress

Env:

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 8.9.4
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: 16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz => 0.54.2

[rickysullivan]

Does anyone have a workaround?

[ThienMD]

same issue, please fix it

[harry020194]

I have the same issue, I try to process input’s value on “Backspace” key so I store key in onKeyPress event handler and I use it in onChange event handler but I found undefined because onChange get fired before onKeyPress, please help

[noll-fyra]

Experiencing this issue too. I have to use a differently ordered combination of onChangeText and onSelectionChange to handle the same text function on iOS and Android.

[lanekatris]

My workaround is acting like the onKeyPress and onTextChange event but doing so on onChange. I have to manually find the string difference though to determine the "key" they pressed. This will act the SAME across iOS and Android.
Demo: https://snack.expo.io/@loonison101/handle-event-firing-discrepancy-rn

onChange({nativeEvent}) {
    const {text: newText} = nativeEvent;
    const {value: oldText, onChange} = this.props; // onChange passed from the parent
    const key = findFirstDifferentChar(newFormattedText, oldText);

    onChange(key, newText);
}

findFirstDifferentChar(currentValue = '', beforeValue = '') {
    if (beforeValue.length > currentValue.length) {
      return 'Backspace'; // They backspaced, same name RN gives the char
    }

    let startIndex;
    [...currentValue].forEach((char, index) => {
      if (startIndex !== undefined) {
        return;
      }

      if (char !== beforeValue[index]) {
        startIndex = index;
      }
    });

    return currentValue[startIndex || 0];
  }



md5-ef5b12c9213f237ba7de2394206c6eab



<TextInput value={value} onChange={this.onChange} />

[ssg-luke]

Also seeing this on RN 0.59.1. There is no workaround other than to handle Android differently from iOS as far as I know

[mieszko4]

For me on RN 0.59.1 this gets even more weird.
I am testing on Android Emulator.

When I press any letter then Backspace my events go consistent:

• onChangeText, onKeyPress
• onChangeText, onKeyPress

But when I press any digit then Backspace my events go like

• onChangeText, onKeyPress
• onKeyPress, onChangeText

Maybe that's for another issue though..

[garrettm]

We're also having problems with this, would be great to get the order standardized. I think onKeyPress should always come before onChangeText.

[stale[bot]]

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.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.