Skip to content

feat(TextArea): add auto-grow functionality with minRows/maxRows#22

Merged
praisethemoon merged 2 commits intomainfrom
sch/feature/text-area
Feb 13, 2026
Merged

feat(TextArea): add auto-grow functionality with minRows/maxRows#22
praisethemoon merged 2 commits intomainfrom
sch/feature/text-area

Conversation

@praisethemoon
Copy link
Collaborator

Add auto-grow behavior to TextArea component that automatically adjusts height based on content. Users can set minRows for starting height and maxRows to limit growth. When maxRows is exceeded, the textarea becomes scrollable.

  • Add minRows and maxRows props to enable auto-grow behavior
  • Implement height adjustment logic using useLayoutEffect and refs
  • Default resize to 'none' when auto-grow is enabled
  • Add mergeRefs utility to handle forwarded and internal refs
  • Update component to use forwardRef for better ref handling
  • Add comprehensive auto-grow stories and examples
  • Update documentation with auto-grow usage and best practices

Fixes #19


Risk level:

  • Low risk (docs, tests, minor fixes)
  • Medium risk (above average work, refactors)
  • High risk (infra, critical changes)

Add auto-grow behavior to TextArea component that automatically adjusts height based on content. Users can set minRows for starting height and maxRows to limit growth. When maxRows is exceeded, the textarea becomes scrollable.

- Add minRows and maxRows props to enable auto-grow behavior
- Implement height adjustment logic using useLayoutEffect and refs
- Default resize to 'none' when auto-grow is enabled
- Add mergeRefs utility to handle forwarded and internal refs
- Update component to use forwardRef for better ref handling
- Add comprehensive auto-grow stories and examples
- Update documentation with auto-grow usage and best practices
Copy link
Collaborator

@jonah-iden jonah-iden left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just tested the auto grow story. Shouldn't min rows also make it shrink to only fit those two rows. Otherwise the min rows does not reall make sense.
Like the first example says min rows 2 but it's clearly at 3

same for the second example

…ation

Reset textarea min-height to 0 before measuring scrollHeight during
auto-grow calculation, then restore it afterward. This prevents CSS
min-height from inflating the measured scrollHeight, which caused
incorrect sizing when minRows equals maxRows.

Add story example for minRows=1, maxRows=1 edge case.
@praisethemoon
Copy link
Collaborator Author

Good find, fixed.

image

Copy link
Collaborator

@jonah-iden jonah-iden left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me now. Love the "this one is a little awkward!" one

@praisethemoon
Copy link
Collaborator Author

Gotta stress it to the limit 😂
Thanks for the review!

@praisethemoon praisethemoon merged commit 7bd7eb8 into main Feb 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow for min/max rows in TextArea

2 participants