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 - sometimes 'onChangeText' callback doesn't work #37612

Closed
APavlov97 opened this issue May 29, 2023 · 6 comments
Closed

TextInput - sometimes 'onChangeText' callback doesn't work #37612

APavlov97 opened this issue May 29, 2023 · 6 comments
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@APavlov97
Copy link

Description

I find out that the issue is reproducible in 0.71.8 or higher version of react-native on iOS platform.

React Native Version

0.71.8

Output of npx react-native info

System:
OS: macOS 13.0
CPU: (8) arm64 Apple M1
Memory: 86.42 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.1.0 - /opt/homebrew/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 8.19.3 - /opt/homebrew/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /Users/antoniopavlov/.gem/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK:
API Levels: 28, 29, 31, 33
Build Tools: 29.0.2, 29.0.3, 30.0.3, 31.0.0, 33.0.0
System Images: android-18 | Google APIs Intel x86 Atom, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-33 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

  1. Render controlled multiline 'TextInput'.
  2. Press on the button to change input value to '$' and after that delete it. Do this step several times.

Snack, code example, screenshot, or link to a repository

https://github.com/APavlov97/demo

@github-actions github-actions bot added the Component: TextInput Related to the TextInput component. label May 29, 2023
@harisbaig100
Copy link

I think that is fixed in this commit

jeongshin@4d32a34

don't know when it will be released but you can change native code to fix your problem.

@NotoriousLisp
Copy link

NotoriousLisp commented Jun 1, 2023

This bug has broken all multiline TextInput components within our app. Also seems related to this closed issue:
#36494

Any estimate on a patch update for this? This is a pretty serious bug to have hanging around as this is (as far as I know) the only possible way to create large text inputs in React Native apps.

@moriax
Copy link

moriax commented Jun 18, 2023

I think that is fixed in this commit

jeongshin@4d32a34

don't know when it will be released but you can change native code to fix your problem.

yes its broken since this patch.
The OnChange Event for my TextInput used for a Chat Box is not working anylonger.
After reset the text state to '' (after sending a message), the first character is always lost and the onChange event is not fired.

If I add (&& [_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) again back to the code its fixed and working.

@tonypeng
Copy link

tonypeng commented Jul 13, 2023

+1 having this issue too

    <TextInput
      onChange={(e) => {
        console.log('onChange');
      }}
      onChangeText={(newText) => {
        console.log('onChangeText');
        setText(newText.toUpperCase());
      }}
      onSelectionChange={(e) => {
        setSelection(e.nativeEvent.selection);
      }}
      onKeyPress={(e) => {
        console.log('onKeyPress');
      }}
      value={text}
      multiline
      autoFocus
    />

Type a few characters, then move the cursor to the middle of the text and type a character. It will not fire an onChange/onChangeText event (although interestingly will fire an onKeyPress event), and as a result the typed character will not be coerced to uppercase. After the next character is typed, onChange/onChangeText events fire.

Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 12, 2024
Copy link

This issue was closed because it has been stalled for 7 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 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

7 participants
@tonypeng @NotoriousLisp @harisbaig100 @moriax @APavlov97 and others