TextInput onSelectionChange() is fired before onChangeText() in IOS, and fired after onChangeText() in Android when letter typed

[amourlanne]

Description

TextInput onSelectionChange() is fired before onChangeText() in IOS, and fired after onChangeText() in Android when letter is typed

React Native Environment Info

System

• OS: Windows 10
• CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
• Memory: 3.35 GB / 15.89 GB

Binaries

• Node: 12.9.0
• Yarn: 1.22.4
• npm: 6.10.2

SDK sdk-35.0.0

Steps To Reproduce

<TextInput
      multiline
      onChangeText={() => console.log('onChangeText')}
      onSelectionChange={() => console.log('onSelectionChange')} />

2. type letter on input

IOS

onSelectionChange
onChangeText

Android

onChangeText
onSelectionChange

Expected Results

In the same order

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[JamesMahy]

I've just come across this issue as well

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 7.69 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0
      System Images: android-27 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-R | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.9.0 => 16.9.0 
    react-native: ^0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

[HyungGilHam]

same issue!

System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 159.66 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.2 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 25, 26, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3
System Images: android-28 | Google Play Intel x86 Atom
Android NDK: 21.0.6113669
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 11.7/11E801a - /usr/bin/xcodebuild
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: ~0.61.5 => 0.61.5
npmGlobalPackages:
create-react-native-module: 0.11.1
react-native-cli: 2.0.1
react-native-drawer-menu: 0.2.5
react-native-git-upgrade: 0.2.7

[davidmrp]

Same issue here!

[tomgransden]

Same issue here, working on a project that needs mentions and this is tripping us up too.

[gpfunk]

This isn't a perfect solution but we ended up calculating the current selection in the onChangeText callback.

If it was IOS we could just use the current selection passed back from onSelectionChange (stored in a ref), and if it was android we would add / subtract the difference in length between the updated and previous value from the selection ref start and end values...there is some nuances for multi char removal etc. but that was the general idea

[Yoshihide-Nishimoto]

@tomgransden

Have you already resolved this?

Same issue here, working on a project that needs mentions and this is tripping us up too.

I'm stucking on this in same situation, my mention tracking doesn't work for this issue....

[manuelbattaglia]

same issues here, any solutions?