-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
fix: textinput multiline with numberoflines issue #4784 #4833
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
base: main
Are you sure you want to change the base?
fix: textinput multiline with numberoflines issue #4784 #4833
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on December 2
Details
Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| contentStyle={[ | ||
| contentStyle, | ||
| autoHeight ? { minHeight: autoHeight } : undefined, | ||
| ].filter(Boolean)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Prop Structure: Unnecessary Array Nesting
The contentStyle prop is always wrapped in an array via .filter(Boolean), creating unnecessary nesting. When a user provides contentStyle as an object and autoHeight is undefined, the result is [contentStyle] instead of contentStyle, causing the child components to receive a nested array structure. While React Native flattens nested arrays, this changes the prop structure and could cause issues with type checking or other tooling. The same issue occurs at lines 582-585 for the flat variant.
| const autoHeight = | ||
| multiline && rest.numberOfLines | ||
| ? rest.numberOfLines * lineHeight + 8 // + padding | ||
| : undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Style Precedence: minHeight vs. numberOfLines
When a user provides minHeight in contentStyle and numberOfLines is also specified, the auto-calculated minHeight from numberOfLines overrides the user's explicit minHeight value. This happens because both values are placed in an array where the auto-calculated value comes last, causing it to take precedence in React Native's style merging. The auto-height should only apply when the user hasn't specified their own minHeight or height.
|
Hey @harshaldhawale, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
Problem
When using , the component does not respect the specified number of lines. The height remains fixed, causing layout issues and requiring manual intervention from the developer.
Motivation
The internal height calculation logic runs after layout instead of before render. Because of this, the initial height is not correctly set based on numberOfLines. The native height is applied later, leading to a mismatch.
Solution
Related issue
#4784 – TextInput with multiline and numberOfLines does not correctly adjust height
Test plan
Note
Ensure multiline TextInput respects numberOfLines by precomputing minHeight from themed lineHeight and applying it via contentStyle.
lineHeightfrom theme (bodyLarge→regularfallback → default24).autoHeightformultilinewithnumberOfLinesand apply asminHeightviacontentStylearray in bothTextInputFlatandTextInputOutlined.contentStylearrays and resulting minHeight/layout changes.Written by Cursor Bugbot for commit 4e2543e. This will update automatically on new commits. Configure here.