[TextInput] input cannot be controlled

[jjenzz]

Description

TextInput value cannot be controlled. Given the following JSX, I expected that typing in the input would do nothing to match behaviour on web:

<TextInput value="" />

Actual behaviour

The value typed by the user flickers on screen before being removed.

RPReplay_Final1660743487.MP4

Version

0.70.0-rc.2

Output of npx react-native info

System:
OS: macOS 12.5
CPU: (10) arm64 Apple M1 Max
Memory: 108.61 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.7.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 2022.08.15.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
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: 2021.2 AI-212.5712.43.2112.8815526
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

• Open snack at https://snack.expo.dev/YtYVsPnOU
• Click iOS (or Android, although it's more intermittent there)
• Type in the input and note that your value flickers in before being removed

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

https://snack.expo.dev/YtYVsPnOU

[kito-arch]

Use defaultValue rather than value.

[jjenzz]

Use defaultValue rather than value.

@kito-arch unfortunately that's not the same thing. the whole point of using value is to control the input value. the defaultValue will make it uncontrolled so the user can still type. that is not supposed to happen in this example.

[kito-arch]

Use defaultValue rather than value.

@kito-arch unfortunately that's not the same thing. the whole point of using value is to control the input value. the defaultValue will make it uncontrolled so the user can still type. that is not supposed to happen in this example.

@jjenzz <TextInput editable={false} /> might help.

[jjenzz]

@kito-arch sorry, i think my example is being taken a bit too literally... the bug is that "controlling" doesn't work. i just used the value="" example to simplify the bug report.

I should be able to do something like this without the user's input appearing beforehand:

const Foo = () => {
  const [value, setValue] = React.useState('');
  return (
    <TextInput 
      value={value} 
      onKeyPress={event => {
        if (['a', 'l', 'l', 'o', 'w', 'e', 'd'].includes(event.nativeEvent.key)) {
          setValue(prev => prev + event.nativeEvent.key);
        }
      }}
    />
  );
}

this is another contrived example, but the point is i should be able to control the input value.

[kito-arch]

There are some cases where flickering will happen in case you do not use editable. As per docs says,
https://reactnative.dev/docs/textinput#value

I guess we have no other options for now.

[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.

[jjenzz]

this is still an issue in a new snack with latest https://snack.expo.dev/@fungiblejen/jealous-tortillas

[gfgabrielfranca]

Any updates on this? or any workaround?