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/how:

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 after setting node.style.height="auto". When the rows attribute is by default set to 2, then by the above mechanism, node.scrollHeight (and therefore node.style.height) will never shrink down to one row.