Home

How to get minimum-one-row Textareas

Set rows prop of the <Textarea/> element to 1.

example:

...
render: function() {
    return <Textarea rows={1} />
},
...

Now your Textarea's can autosize down to one row!

why:

The default browser value on the rows attribute of the textarea element is set to 2.

A poorly documented behavior of setting the height: auto style on the textarea element is that the scrollHeight attribute is set to something along the lines of Math.max(actually_needed_rows, node.getAttribute("rows")) * row_height.

react-textarea-autosize autosizes by setting node.style.height to node.scrollHeight. When the rows attribute is not set to 1, then by the above mechanism, node.scrollHeight (and therefore node.style.height) will never shrink down to one row.