TextInput (IOS) : maxLength & multiline true = onChangeText multiple call

[mlcpro]

Description

I have noticed that when we have maxLength={number} and multiline={true}, if I manually modify my state with a long sentence, the onChangeText function is called 5 times, and furthermore, it modifies the initial value. Please take a look at the snack link I provided and see for yourself the value assigned to setDescription1 and the output value in the console.

Steps to reproduce

1. In the snack link that I provided, put it on the IOS part and click on the "Change text" button

React Native Version

0.74.1

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.4
  CPU: (8) arm64 Apple M3
  Memory: 448.80 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.5.0
    path: /opt/homebrew/opt/node/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: /opt/homebrew/opt/node/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.1
    wanted: 0.73.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

Before :

In the Shadow of Young Girls in Flowers, published in 1913, second volume of In Search of Lost Time, won the Goncourt Prize in 1919. For Marcel Proust (1871-1922), it was the rebirth of a work

After :

In the SIn the Shadow of Young Girls in Flowers, published in 1913, second volume of In Search of Lost Time, won the Goncourt Prize in 1919. For Marcel Proust (1871-1922), it was the rebirth of a work

Reproducer

reproducer-template snack

Screenshots and Videos

No response

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[Daha62]

Having the same issue on react-native 0.72.13 with multiline

[lorenc-tomasz]

Very annoying bug. You can check this topic: https://github.com/facebook/react-native/issues/36494 I guess it's the same, and there are some workarounds for this issue.

[mlcpro]

Very annoying bug. You can check this topic: #36494 I guess it's the same, and there are some workarounds for this issue.

Yes I have already seen this issue, as it is closed I re-opened the subject because the problem is still present

[kunalchavhan]

@mlcpro Could not reproduce issue on latest version. Can you please verify with latest version and provide a reproducer app created from reproducer-template?

[mlcpro]

@mlcpro Could not reproduce issue on latest version. Can you please verify with latest version and provide a reproducer app created from reproducer-template?

@kunalchavhan Of course, I just did the test, I confirm in the latest version (0.74.2) the bug is still present, please see reproducer template

[kunalchavhan]

@mlcpro Thanks for providing reproducer. The issue is clearly getting reproduced.

[deepanshushuklad11]

@mlcpro @cortinico While debugging the issue i found , in the below code snippet onChangeText callback never gets called if i am changing input via state in Fabric new arch , before providing the solution for old-arch i want to confirm if this is the expected behaviour in Fabric. <View style={styles.input}> <Button onPress={() => setDescription1('HelloWorld')} title="Change text" /> <TextInput multiline={true} maxLength={18} value={description1} onChangeText={(text) => { console.log(text); setDescription1(text); }} /> </View>

[jackylu0124]

I am encountering the same issue, the part where the value is modified incorrectly is causing me a lot of headaches.

For example, in my case, I have maxLength={8} and if I type "Abcde" and then programmtically set the state to empty string and navigate to another screen; and then coming back to the screen and programmatically setting the state to "Abcde" again, the text input then incorrectly renders the string "AbcAbcde"

Which alternative solution works for you guys? Thanks in advance!