Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
arcln opened this issue Dec 29, 2022 · 4 comments
Closed

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

arcln opened this issue Dec 29, 2022 · 4 comments
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@arcln
Copy link

arcln commented 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.
@arcln arcln changed the title [TextInput] Visual glitch under certain conditions on iOS [TextInput] Visual glitch under certain conditions on iOS only Dec 29, 2022
@react-native-bot react-native-bot added Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. labels Dec 29, 2022
@volkish
Copy link

volkish commented Feb 10, 2023

+1

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

@NandoMB
Copy link

NandoMB commented May 25, 2023

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

This was referenced May 25, 2023
Closed
Closed
@cortinico cortinico added the Resolution: PR Submitted A pull request with a fix has been provided. label May 25, 2023
@fabOnReact fabOnReact mentioned this issue Jul 8, 2023
Closed
@fabOnReact fabOnReact mentioned this issue Jul 15, 2023
Closed
@github-actions GitHub Actions
Copy link

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.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 22, 2023
@github-actions GitHub Actions
Copy link

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

facebook-github-bot pushed a commit that referenced this issue Feb 2, 2024
@fabOnReact @facebook-github-bot
Fix TextInput vertical alignment issue when using lineHeight prop on …
349d550 
…iOS without changing Text baseline (Paper - old arch) (#38359)

Summary:
This PR fixes visual regression introduced with #37465 (comment)

Adding paragraphStyle.maximumLineHeight to a iOS UITextField displays the text under the UITextField ([ios-screenshot-1][1], [ios-screenshot-2][2], [ios-screenshot-3][3]).

The PR implements the logic from RCTTextShadowView [#postprocessAttributedText](https://github.com/facebook/react-native/blob/9ab27e8895d6934e72ebdc601d169578ab9628f1/packages/react-native/Libraries/Text/Text/RCTTextShadowView.m#L165-L167) in RCTBaseTextInpuShadowView [#uiManagerWillPerformMounting](https://github.com/facebook/react-native/blob/4c944540f732c6055d447ecaf37d5c8f3eec1bc4/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m#L130-L192).

[1]: https://user-images.githubusercontent.com/24992535/238834159-566f7eef-ea2d-4fd4-a519-099b0a12046c.png "ios-screenshot-1"
[2]: https://user-images.githubusercontent.com/24992535/238834184-feb454a9-6504-4832-aec8-989f1d027861.png "ios-screenshot-2"
[3]: https://user-images.githubusercontent.com/24992535/238834283-cf572f94-a641-4790-92bf-bbe43afb1443.png "ios-screenshot-3"

[4]: https://github.com/Expensify/App/assets/24992535/06726b45-7e35-4003-9fcc-50c8d0dff0f6
[5]: https://github.com/Expensify/App/assets/24992535/d9745d29-8863-4170-bcc3-e78fa7e550d2

fixes #28012 fixes #33986
Related #35741 #31112

## Changelog:

[IOS] [FIXED] - Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch)

Pull Request resolved: #38359

Test Plan: Extensive test included in the PR comments #37465 (comment) and Expensify/App#17767 (comment)

Reviewed By: cipolleschi

Differential Revision: D52325261

Pulled By: dmytrorykun

fbshipit-source-id: d072a598bfaafbbffc41005b1fda1795cf3d8ab9
lunaleaps pushed a commit that referenced this issue Feb 20, 2024
@fabOnReact @lunaleaps
Fix TextInput vertical alignment issue when using lineHeight prop on …
5ca5e3b 
…iOS without changing Text baseline (Paper - old arch) (#38359)

Summary:
This PR fixes visual regression introduced with #37465 (comment)

Adding paragraphStyle.maximumLineHeight to a iOS UITextField displays the text under the UITextField ([ios-screenshot-1][1], [ios-screenshot-2][2], [ios-screenshot-3][3]).

The PR implements the logic from RCTTextShadowView [#postprocessAttributedText](https://github.com/facebook/react-native/blob/9ab27e8895d6934e72ebdc601d169578ab9628f1/packages/react-native/Libraries/Text/Text/RCTTextShadowView.m#L165-L167) in RCTBaseTextInpuShadowView [#uiManagerWillPerformMounting](https://github.com/facebook/react-native/blob/4c944540f732c6055d447ecaf37d5c8f3eec1bc4/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m#L130-L192).

[1]: https://user-images.githubusercontent.com/24992535/238834159-566f7eef-ea2d-4fd4-a519-099b0a12046c.png "ios-screenshot-1"
[2]: https://user-images.githubusercontent.com/24992535/238834184-feb454a9-6504-4832-aec8-989f1d027861.png "ios-screenshot-2"
[3]: https://user-images.githubusercontent.com/24992535/238834283-cf572f94-a641-4790-92bf-bbe43afb1443.png "ios-screenshot-3"

[4]: https://github.com/Expensify/App/assets/24992535/06726b45-7e35-4003-9fcc-50c8d0dff0f6
[5]: https://github.com/Expensify/App/assets/24992535/d9745d29-8863-4170-bcc3-e78fa7e550d2

fixes #28012 fixes #33986
Related #35741 #31112

## Changelog:

[IOS] [FIXED] - Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch)

Pull Request resolved: #38359

Test Plan: Extensive test included in the PR comments #37465 (comment) and Expensify/App#17767 (comment)

Reviewed By: cipolleschi

Differential Revision: D52325261

Pulled By: dmytrorykun

fbshipit-source-id: d072a598bfaafbbffc41005b1fda1795cf3d8ab9
@fabOnReact fabOnReact mentioned this issue May 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@volkish @cortinico @NandoMB @arcln @react-native-bot