TextArea's autoHeight sometimes makes it taller than an actual text

[WiNloSt]

Steps

1. visit https://react.semantic-ui.com/addons/text-area#text-area-example-auto-height
2. start typing or copy-pasting some very random long text.
3. The textarea height will eventually grow higher than the content itself

Expected Result

the textarea height match the content height

Actual Result

the textarea height is more than the content height

Version

0.74.2

Browsers tested

Chrome 61.0.3163.100
FireFox 55.0.3

Explanation

I think this happen because the way we calculate height. By setting height to auto the overflow content will sit in the textarea with a scroll bar. So scrollHeight will sometimes has a value larger than the actual content height without a scroll bar. Because there could be a scenario where the appearance of the scroll bar will push some words down to a new line.

I think this will happen in an environment where the scroll bar actually take spaces in the viewport.

Testcase

https://codepen.io/WiNloSt/pen/qPxEaY

[levithomason]

Oh, you're fantastic. I was boggled over this some time ago and decided a couple extra pixels would just have to do. However, simply setting overflowY = 'hidden' when height = 'auto' produces the correct scrollHeight without the extra few pixels:

The exact height, in this case, is 2574. This is exactly what we get when adding the already calculated borderHeight of 2px (1x top 1px bottom) back in.

A PR setting/unsetting the overflowY style would be greatly appreciated!

[WiNloSt]

Ok, I'll work on it!

[levithomason]

Released in semantic-ui-react@0.75.1