textarea sometimes does not autosize when parent has a scrollbar

[carlcodes]

https://codepen.io/carlcodes/pen/gerRJv

I'm seeing this on windows 10 and chrome

When the parent container has an overflow of auto and overflows, sometimes the textarea doesn't autosize and the height of the text is larger than the height of the textarea. After typing further on the last line, it eventually autosizes.

For the sake of the example, I have put an initial value on my example textarea, but the bug can be achieved by putting it in manually as well. If you remove the word 'bug' from the last sentence, and then re-add it back, it happens again.

I briefly looked at the source and it seems like it's getting the wrong scrollHeight value in the resize() function.

Any help is appreciated.

Thanks.

[jackmoore]

Thanks for the Codepen, that helps. I wanted to comment that I was able to verify your issue.

Autosize determines height by adding the scrollHeight to the textarea's natural height. What's happening here is that when Autosize removes the inline height to measure the natural height / overflow, the textarea shrinks down enough not to trigger overflow on the parent, temporarily removing the scrollbar. When Autosize sets the height the scrollbar reappears, which constricts the textarea height a bit so that the calculated height is no longer correct.

I'm not sure what to do about this yet, but I'm surprised that this is the first time this has been brought to attention.

[kpatient]

I came across a similar issue with scrollHeight. For me the workaround was to calculate the scrollHeight twice directly afterwards, like so:

   ta.style.height = '';
   ta.style.height = (ta.scrollHeight+heightOffset)+'px';
   ta.style.height = (ta.scrollHeight+heightOffset)+'px';

Here's an update on @carlcodes pen