Skip to content

[TextInput] Visual glitch under certain conditions on iOS only #35741

@bitdriftr

Description

@bitdriftr

Description

Under very specific circumstance, the TextInput component seems to have a visual glitch. Upon pressing the "Return" key, the caret is not moving to the next line. However, after typing any character, the caret will instantly move to the next line and add the typed character.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2022-12-29.at.12.48.11.mp4

Version

Tested on 0.70.5 and 0.68.2

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 95.00 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /Library/Java/JavaVirtualMachines/openjdk.jdk/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.5 => 0.70.5
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

The bug triggers under very weird circumstances :

  • The TextInput must be wrapped into a view that has top margin or padding.
  • The TextInput must be adjacent to a Text component with a custom font size (SVG icons will behave the same).
  • The TextInput must have scrollEnabled={false} and a custom lineHeight.
  • The bug triggers on iPhone 14 Pro Max iOS 16.2 (both simulator and real device), but not on iPhone SE simulator (iOS 16.2 too)

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

Repository : https://github.com/arcln/react-native-text-input-bug-demo
Run using expo start.
Then try to type some lines into the red text input.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: TextInputRelated to the TextInput component.Needs: Triage 🔍Platform: iOSiOS applications.Resolution: PR SubmittedA pull request with a fix has been provided.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions