Repository navigation
TextInput wraps text instead of showing ellipsis #21969
Description
- 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 10.14
CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 369.40 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/opt/node@8/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 25.0.3, 26.0.2, 27.0.1, 27.0.3, 28.0.2, 28.0.3
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.18 => 16.4.18
@types/react-native: 0.57.3 => 0.57.3
react: ^16.5.0 => 16.5.0
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-git-upgrade: 0.2.7
Description
When a user types directly into a TextInput and overflows the width, then blurs, the content wraps instead of an ellipsis being added. Content is ellipsisized correctly if it's set programatically. Adding vertical padding can hide the wrapping content, but the ellipsis is still missing.
In the screenshots (and demo) the first input has numberOfLines={1}, the second doesn't, the third has paddingVertical: 0, the fourth has paddingVertical: 20.
| 1 | 2 | 3 | 4 |
|---|---|---|---|
 |
 |
 |
 |
Activity
react-native-bot commentedon Oct 27, 2018
Can you run
react-native infoand edit your issue to include these results under the Environment section?If you believe this information is irrelevant to the reported issue, you may write
[skip envinfo]under Environment to let us know.apexskier commentedon Oct 29, 2018
editing to
[skip envinfo]didn't seem to workkelset commentedon Mar 19, 2019
👋
I just tested your repro code and it doesn't look like the issue it still present on version 0.59 - so I'm going to close this issue.
Please let me know if it still happens to you, here's my screenshot:
christopher-18 commentedon May 30, 2019
This issue still persists in android for rn version 0.59
borm commentedon Jul 30, 2019
"react-native": "0.59.9"keyboardType="email-address"Still reproduce
AntonisFK commentedon Jan 27, 2020
Looks like this issue is related to #14845
mwilson71 commentedon Jan 31, 2020
I've run into this and tested it pretty extensively on iOS. It seems like it is actually related to iOS version. I do not see the behavior on iOS 10.3 devices, those place ellipsis at the end of the text as expected. On iOS 11, 12, and 13 devices however, I see this new, broken behavior where the text wraps instead of staying on a single line. This is running the same exact RN code, consisting of a single TextInput box. This is with React Native 0.61.5