Skip to content

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

Closed
Closed
[TextInput] Visual glitch under certain conditions on iOS only#35741
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.

Description

@bitdriftr
bitdriftr
opened on Dec 29, 2022

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.

Activity

  1. bitdriftr
    added
    Needs: Triage 🔍
    on Dec 29, 2022
  2. bitdriftr
    changed the title [-][TextInput] Visual glitch under certain conditions on iOS[/-] [+][TextInput] Visual glitch under certain conditions on iOS only[/+] on Dec 29, 2022
  3. react-native-bot
    added
    Component: TextInputRelated to the TextInput component.
    Platform: iOSiOS applications.
    on Dec 29, 2022

  4. volkish commented on Feb 10, 2023

    @volkish
    volkish
    on Feb 10, 2023

    +1

    Simulator Screen Recording - iPhone 14 - 2023-02-10 at 15 52 24

  5. NandoMB commented on May 25, 2023

    @NandoMB
    NandoMB
    on May 25, 2023

    Aparently @fabriziobertoglio1987 already fixed it on #37465...

  6. cortinico
    added
    Resolution: PR SubmittedA pull request with a fix has been provided.
    on May 25, 2023

  7. github-actions commented on Nov 22, 2023

    @github-actions
    github-actionsbot
    on Nov 22, 2023 – with GitHub Actions

    This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

  8. github-actions
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Nov 22, 2023

  9. github-actions commented on Nov 29, 2023

    @github-actions
    github-actionsbot
    on Nov 29, 2023 – with GitHub Actions

    This issue was closed because it has been stalled for 7 days with no activity.

  10. github-actions
    closed this as completedon Nov 29, 2023
  11. facebook-github-bot
    added a commit that references this issue on Feb 2, 2024

    Fix TextInput vertical alignment issue when using lineHeight prop on …

    349d550
  12. lunaleaps
    added a commit that references this issue on Feb 20, 2024

    Fix TextInput vertical alignment issue when using lineHeight prop on …

    5ca5e3b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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