-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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.
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
[TextInput] Visual glitch under certain conditions on iOS only #35741
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
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
added
Component: TextInput
Related to the TextInput component.
Platform: iOS
iOS applications.
labels
Dec 29, 2022
Aparently @fabriziobertoglio1987 already fixed it on #37465... |
This was referenced May 25, 2023
Closed
cortinico
added
the
Resolution: PR Submitted
A pull request with a fix has been provided.
label
May 25, 2023
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
bot
added
the
Stale
There has been a lack of activity on this issue and it may be closed soon.
label
Nov 22, 2023
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
…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
…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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
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
Steps to reproduce
The bug triggers under very weird circumstances :
TextInput
must be wrapped into a view that has top margin or padding.TextInput
must be adjacent to aText
component with a custom font size (SVG icons will behave the same).TextInput
must havescrollEnabled={false}
and a customlineHeight
.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.
The text was updated successfully, but these errors were encountered: