search

buildo / react-autosize-textarea

A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user input.
http://react-components.buildo.io/#textareaautosize
MIT License
488 stars 85 forks source link

How to 'force' auto-height calculation? #147

Open ZeroByter opened 4 years ago

ZeroByter commented 4 years ago

Hey!

I got an issue, when my component is loaded the TextareaAutosize component starts out as 'display: none', and when the user clicks on a button only then does the TextareaAutosize appear (with 'display:;' to unset the previous CSS display property)

The issue: This works fine, except when the user has already inputted some multi-line text, the textarea is hidden again, and then when it is shown again the height is suddenly the minimum one-line height.

How can I make TextareaAutosize recalculate the proper height when it reappears with tall text contents already in it?

eriksecker commented 4 years ago

Not sure if this will help, but I found the following worked for a similar issue I ran into.

Issue: My controlled TextareaAutoresize component with an initial value was inside a React Bootstrap Collapse where the overall container begins with a style of display:none. When the Collapse is “opened” and the display changes to block, the textarea displayed at the minimum height instead of the height sized for the initial value.

Fix / Workaround: Added async={ true } to my TextareaAutoresize component. Added a conditional to only render the TextareaAutoresize component if the Collapse was “open”. Both were required as simply doing one or the other resulted in the originally described behavior.