Skip to content

TextInput wraps text instead of showing ellipsis #21969

Closed
@apexskier

Description

@apexskier

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
img_0162 img_0163 img_0164 img_0165

Reproducible Demo

https://snack.expo.io/@apexskier/text-wrapping

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions