The onChangeText and onChange events on a TextInput fire twice on Android

[kadikraman]

Description

With the new architecture enabled, the onChangeText and onChange events on a TextInput fire twice on Android.

Steps to reproduce

1. Install the application with yarn android
2. Enter some text in the text input
3. Observe the logs in the console
4. EXPECTED: each onChange and onChangeText gets logged once per key stroke
5. ACTUAL: they get triggered twice per key stroke

React Native Version

0.74.3

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M2
  Memory: 178.64 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: ~/.nvm/versions/node/v20.14.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.14.0/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.14.0/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/kadi/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Users/kadi/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.7.8
    path: /Users/kadi/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

(NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  t
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  t
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  te
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  te
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  tes
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  tes
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  test
 (NOBRIDGE) LOG  change
 (NOBRIDGE) LOG  test

Reproducer

https://github.com/kadikraman/new-arch-text-input-bug

Screenshots and Videos

Screen.Recording.2024-07-18.at.11.20.20.mov

[shubhamguptadream11]

@kadikraman Is this happening in iOS also?

[kadikraman]

@kadikraman Is this happening in iOS also?

Nope, I was only able to reproduce it on Android.

[shubhamguptadream11]

@kadikraman I checked this issue, and it is reproducible in react-native latest version: 0.74.3 as mentioned by you.

But I am not able to reproduce it in current react-native main i.e using there rn-tester app here. May be it got fixed, just check it there once.

[kadikraman]

@kadikraman I checked this issue, and it is reproducible in react-native latest version: 0.74.3 as mentioned by you.

But I am not able to reproduce it in current react-native main i.e using there rn-tester app here. May be it got fixed, just check it there once.

Interesting, same here by the looks of it: I can't reproduce it on the tester app in the react native repo 🤔

[shubhamguptadream11]

@kadikraman We can look into the diff between these codes then or wait for new version to be published

[cortinico]

Could you folks try your reproducer react-native@nightly ?

[blakef]

Thanks for the very complete issue @kadikraman. I've just tried to reproduce this on 0.75.0-rc.6, and it seems to have been resolved in the newer release:

CleanShot.2024-08-01.at.12.01.24.mp4

I'll try figure out what change has fixed this.

[blakef]

The fix for this is #44479, we should probably pick this in the next release.