Repository navigation
No way to prevent newline character in multiline TextInput (without flicker) #28535
Description
Description
Impossible to prevent newlinews in a multiline={true} field without flicker of either input value or keyboard? Trying to create a TextInput which accepts a single line of input (no newlines), but allows the text to wrap on the screen. Using multiline={false} prevents text from wrapping.
React Native version:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 388.20 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.6.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.4 - ~/.npm-packages/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.4 AI-183.5429.30.34.5452501
Xcode: 11.4/11E146 - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.1 => 0.62.1
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- clone and run https://github.com/tacomanator/RNIssue_singlelineWrapTextInput (snack below, most easily reproducible on device or simulator not preview)
- type a few lines of text into the TextInput (no newline)
- Put cursor at beginning of field and press Return key
You'll see the text jumps down before the onChange handler kicks in and removes the newline.
Expected Results
The input can be stopped prior to entry into the field (no flicker).
Snack, code example, screenshot, or link to a repository:
https://github.com/tacomanator/RNIssue_singlelineWrapTextInput
or as a snack https://snack.expo.io/@tacomanator/a66414
I realize that similar issues have been logged, but after much research it seems like the usual workarounds are incompatible with newlines in particular.
Reacted by Carmen Chapa and Sergei Solo
Activity
github-actions commentedon Apr 7, 2020
tacomanator commentedon Apr 8, 2020
I recreated the issue using react-native directly (instead of expo) to demonstrate with the latest RN version. Still reproducible. Updated issue with link to new repository.
joelrorseth commentedon Apr 8, 2020
I was able to reproduce this issue. It looks like people have been facing this problem on iOS and Android for a while now. #24585 seems to describe this problem, but was closed without resolution. A related issue was fixed in #18874, but one of the contributors acknowledged that the flickering problem will still exist:
Perhaps more investigation can be done to determine if the flicker can be avoided.
elicwhite commentedon Apr 8, 2020
This is unfortunately the expected behavior of TextInput due to the async nature of RN and has existed since the beginning of the project. The native view updates before the JS onChange function is called and React does another render. We are hoping that with Fabric we can explore making onChange a synchronous callback. The other solution to this would require something like another prop on TextInput like
preventDefaultOnKeys: ['enter']although that API isn't great either.This likely won't get fixed until we have the capabilities Fabric introduces though.
charles-goode commentedon Mar 18, 2021
@TheSavior What's wrong with that API? Seems to cover many use cases. This limitation is really ugly and even more common.
YaoHuiJi commentedon Jun 22, 2021
hi @TheSavior,are there any updates? I think "multiline TextInput without newline character" is a pretty common use case when user inputs long title or subtitle.