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

Problem with lineHeight in TextInput #31112

Open
wiru123321 opened this issue Mar 8, 2021 · 10 comments
Open

Problem with lineHeight in TextInput #31112

wiru123321 opened this issue Mar 8, 2021 · 10 comments
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Issue Manager Attention

Comments

@wiru123321
Copy link

Hi! 👋

I found some bug with TextInput.
When i change the lineHeight props for my custom - three dots at the end of the TextInput when the text is too long disappears.
react-native: "0.63.4"

Zrzut ekranu 2021-03-8 o 16 35 13
@chrisglein chrisglein added the Component: TextInput Related to the TextInput component. label Mar 9, 2021
@chrisglein
Copy link

This sounds very familiar. I've seen other TextInput + ellipses issues come through but I'm having a hard time finding this. You can help look through here.
It'd be helpful if there was a Snack or at least copy-able version of your repro instead of a screenshot.

@chrisglein chrisglein added Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. Needs: Issue Template This issue does not make use of the Issue Template, and may be missing necessary information. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. and removed Needs: Triage 🔍 labels Mar 9, 2021
@github-actions
Copy link

github-actions bot commented Mar 9, 2021

⚠️ Missing Reproducible Example
ℹ️ It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

@github-actions
Copy link

github-actions bot commented Mar 9, 2021

⚠️ Missing Environment Information
ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

@github-actions
Copy link

github-actions bot commented Mar 9, 2021

⚠️ Missing Required Fields
ℹ️ It looks like your issue may be missing some necessary information. GitHub provides an example template whenever a new issue is created. Could you go back and make sure to fill out the template? You may edit this issue, or close it and open a new one.

@wiru123321
Copy link
Author

My environment info:
Zrzut ekranu 2021-03-10 o 09 13 07
Here is simple example - test it on iOS because here is the problem:
https://snack.expo.io/bL9-PEM1e

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Mar 10, 2021
@SusulAdam
Copy link

Hi!

I have the same problem, i try implement custom font to the project with different line height to the textfield. Unfortunately three dots at the end of the Text Input when the text is too long disappears.

@wiru123321
Copy link
Author

If u looking for fast but not perfect solution u can set lineHeight to undefined after changed font styles for custom, but i'm waiting for better solution.

@anwargul0x
Copy link

not only it affects trimming but it also doesn't show new input text after a certain character length or width of TextInput

@chrisglein chrisglein added Needs: Issue Manager Attention Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Attention Issues where the author has responded to feedback. Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. Needs: Issue Template This issue does not make use of the Issue Template, and may be missing necessary information. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Apr 20, 2021
@chrisglein chrisglein mentioned this issue May 18, 2021
Open
@NandoMB
Copy link

NandoMB commented May 25, 2023

#37465

@fabOnReact fabOnReact mentioned this issue May 25, 2023
Closed
@fabOnReact
Copy link
Contributor

My PR did not yet fix this issue, but a similar solution can also fix this issue

As you see, adding lineHeight changed the width of the _UITextLayoutFragmentView. As the view changes width from 138 to 119, which is the reason the ellipsis does not show.

Screenshot 2023-05-25 at 2 03 59 PM Screenshot 2023-05-25 at 2 03 56 PM

@fabOnReact fabOnReact mentioned this issue May 25, 2023
Closed
6 tasks
@fabOnReact fabOnReact mentioned this issue Jul 8, 2023
Closed
@fabOnReact fabOnReact mentioned this issue Jul 15, 2023
Closed
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
@kacper-mikolajczak kacper-mikolajczak mentioned this issue Jul 11, 2024
Closed
1 task
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. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Issue Manager Attention
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@NandoMB @fabOnReact @anwargul0x @chrisglein @wiru123321 @SusulAdam