Skip to content

TextInput order of events are inconsistent between iOS and Android #18221

Description

@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

screenshot 2018-03-06 17 12 21

On Android, the events are in the following order:

screenshot 2018-03-06 17 12 27

Steps to Reproduce

https://snack.expo.io/Hk2qtCouf

Activity

  1. leighman commented on Mar 9, 2018

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

  2. react-native-bot commented on Mar 16, 2018

    @react-native-bot
    Collaborator

    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.

  3. 11 remaining items

  4. harry020194 commented on Apr 21, 2019

    @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

  5. noll-fyra commented on May 7, 2019

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

  6. lanekatris commented on May 20, 2019

    @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];
      }
    
    <TextInput value={value} onChange={this.onChange} />
    
  7. lukefanning commented on May 22, 2019

    @lukefanning

    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

  8. mieszko4 commented on Jul 26, 2019

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

  9. garrettm commented on Aug 6, 2019

    @garrettm

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

  10. stale commented on Nov 4, 2019

    @stale

    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.

  11. added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Nov 4, 2019
  12. stale commented on Nov 11, 2019

    @stale

    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.

  13. locked as resolved and limited conversation to collaborators on Nov 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: TextInputRelated to the TextInput component.Platform: AndroidAndroid applications.Platform: iOSiOS applications.Ran CommandsOne of our bots successfully processed a command.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions