Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lxcid opened this issue Mar 6, 2018 · 15 comments
Closed

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

lxcid opened this issue Mar 6, 2018 · 15 comments
Labels
Bug Component: TextInput Related to the TextInput component. Platform: Android Android applications. Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@lxcid
Copy link

lxcid commented Mar 6, 2018

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

@leighman
Copy link

leighman commented Mar 9, 2018

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.

@hramos hramos added the Platform: iOS iOS applications. label Mar 13, 2018
@react-native-bot react-native-bot added Android Ran Commands One of our bots successfully processed a command. Component: TextInput Related to the TextInput component. labels Mar 13, 2018
@react-native-bot
Copy link
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.

@react-native-bot react-native-bot added Needs More Information ❔ Ran Commands One of our bots successfully processed a command. labels Mar 16, 2018
@react-native-bot react-native-bot added Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. labels Mar 18, 2018
@ilonashub
Copy link

happens in 0.55 as well.

@react-native-bot
Copy link
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.

@richgilbank
Copy link

richgilbank commented May 17, 2018

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
Copy link

Does anyone have a workaround?

@ThienMD

This comment has been minimized.

@harry020194
Copy link

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
Copy link

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
Copy link

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} />

@lukefanning
Copy link

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
Copy link

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
Copy link

garrettm commented Aug 6, 2019

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

@stale
Copy link

stale bot commented Nov 4, 2019

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 4, 2019
@stale
Copy link

stale bot commented Nov 11, 2019

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.

@stale stale bot closed this as completed Nov 11, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Nov 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Platform: Android Android applications. Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests