[iOS] Disallow user to enter spaces in TextInput.

[Sc4ramouche]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
Memory: 102.42 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.9.4 - /opt/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.2, 26.0.2, 27.0.3, 28.0.2
API Levels: 23, 24, 25, 26, 28
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.6 => 16.4.6
@types/react-native: ^0.56.3 => 0.56.4
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0

Description

I'm trying to trim user input in TextInput field. I've tried to just use JS trim function from String.prototype but had to replace it with .replace(/\s/g, ''). The reason is that when I open my application on iOS simulator I'm experiencing behaviour when user input is gets trimmed, but it's not reflected on UI. I'm still able to type as mush spaces as I want.

Reproducible Demo

Code looks something like the following:

<TextInput
  ...
  value={this.state.myString}
  onChangeText={this.updateInput.bind(this)}
/>

And updateInput is represented as:

updateInput(newString) {
  this.setState({ myString: newString.trim() });
}

I've recorded short video of described behaviour. It's not quite good as I expected but it's possible to get the idea of the issue. I'm sorry for that. If needed I'll try to set more examples and record better frames.

Link: https://streamable.com/dzl3c

Thanks to @zibs for snack demo: https://snack.expo.io/@elizibin/tenacious-beef-jerky

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[zibs]

Here's a snack for you: https://snack.expo.io/@elizibin/tenacious-beef-jerky

[Sc4ramouche]

Thank you! @zibs

[vovkasm]

There was a bug (#18874) in RN 0.56 that prevent controlled TextInput to work properly. It was fixed in RN 0.57.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.