TextInput with nested Text field for styling duplicates letters when typing.

[AdamJB]

Description

Recently we updated to RN 0.70, and have encountered an issue where having a nested inside a field causes double typing. Before this worked fine in RN 0.63.

We use this to stylize @mention inputs for a chat feature.

Notes:
Adding value={''} fixes the issue for iOS, but causes a crash on Android with Cannot specify both value and children..

I managed to get it working on Android by commenting that line out in the RN code base, and patching it, but it causes another issue, where typing on Android "skips" a few letters when typing.

Version

0.70.0

Output of npx react-native info

System:
OS: macOS 12.5.1
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 1.82 GB / 16.00 GB
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - ~/git/caliber-mobile-app/node_modules/.bin/yarn
npm: 8.18.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: Chipmunk 2021.2.1 Patch 2 Chipmunk 2021.2.1 Patch 2
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /Users/abednarek/.sdkman/candidates/java/current/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: v0.70.0 => 0.70.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

• Use a Text Input with nested for styling
• Type in the text field, and notice that the characters are duplicated. 1 set is Styled as per the component, and the others are styled differently.

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

Code Snippet on reproducing this issue. Quite straight forward:

<TextInput
  style={{
    width: 240,
    height: 44,
    backgroundColor: '#ccc',    
  }}
  onChangeText={(text) => {
    setEnteredText(text);
  }}          
  >
  <Text
    style={{
      color: '#F0F'
    }}>
      {enteredText}
  </Text>
</TextInput>

Here's what it looks like when I type "Hi":

[wfern]

Hi! I can confirm and reproduce the issue.

I can confirm it's not happening on 0.69.x.

I think it was introduced here: 51f49ca
Setting the value to an empty string works on iOS but not on Android because os this check:

react-native/Libraries/Components/TextInput/TextInput.js

Lines 1443 to 1447 in bfb36c2

	const childCount = React.Children.count(children);
	invariant(
	!(props.value != null && childCount),
	'Cannot specify both value and children.',
	);

Commenting the added lines of the commit fixed for me on both platforms.

[AdamJB]

Hi,

I did that but it causes another issue for me. Typing on Android skips letters on the Android Keybaord on Android 10 and 11, but seems to work fine on Android 12. I was able to also get it working with other keyboards, like Fleksy, but we can't just ask all our Android users to use different keyboards.

Simple way to reproduce that:
On an Android 10 emulator, type something like "keyboard" really quick using the virtual keyboard, and notice that when typing 2 characters quickly together will register with the keyboard and show that it was tapped, but the characters don't get sent to the input field.

I assume it's related to why this 'Cannot specify both value and children' was introduced.

• Adam

[wfern]

I try to find this issue, tested on Android 10 and 11 emulators for this and can't reproduce it. Tested with virtual and physical keyboard typing really quick but no luck find it.

Can you make a quick video reproducing it? I think it can help other people to confirm it.

[efstathiosntonas]

This is the issue:
https://user-images.githubusercontent.com/717975/190082383-66bb3ee3-1a6e-4b2b-9dcc-1c1da99472ff.mov

edit: I also use this "technique" to add @mentions

[HackerM00n]

Faced the same problem after updating RN 0.68.0 to 0.70.1.

Compared TextInput.js and found two lines that break our functionality.

I just commented them and it worked for me. No need to add value={''}.

Hope this helps you too.

[t0nyh0]

Thank you @HackerM00n!

react-native+0.70.1.patch file for those using patch-package for now, until an official fix is in

https://github.com/facebook/react-native/issues/34668

diff --git a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
index cb71d97..8fa1171 100644
--- a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+++ b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
@@ -976,8 +976,6 @@ function InternalTextInput(props: Props): React.Node {
   const text =
     typeof props.value === 'string'
       ? props.value
-      : typeof lastNativeText === 'string'
-      ? lastNativeText
       : typeof props.defaultValue === 'string'
       ? props.defaultValue
       : '';

[Noitham]

Confirm I have the same issue after upgrading from 0.69.4 to 0.70.1.

Moved the <TextInput> nested children into the value prop instead and all good.

[github-actions]

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]

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