As you type text, textarea, scroll to the end?

A textarea that expands (changed row) using js, when you enter text.

But with the appearance of the scroll, the textarea is not "zakruchivaetsya" to the end.
Here is the css style
textarea#textArea {
 font-family: Arial;
 font-size: 14px;
 line-height: 22px;
 letter-spacing: -.35px;
 text-align: left;
 overflow-wrap: break-word;
 word-break: break-word;
 padding: 0 0 10px 0;
 outline: none;
 width: 100%;
 min-height: 12px;
 max-height: 104px;
 border: none;
 resize: none;
 overflow: auto; }


Here is the complete example:
https://codepen.io/workcode/pen/vYOamme

How to see the problem:
In the example, click on the blue circle, then enter 6 rows by pressing Enter. In the 1 symbol to enter.

PS. Somehow can't upload animated gif-ku. ((

Upd. Added the example line:
document.getElementById('textArea').scrollTop = document.getElementById('textArea').scrollHeight;

Now when you increase the number of rows left everything as it was.
But if you write even 1 character, then everything is back to normal.
It should have finished ))
April 8th 20 at 18:20
1 answer
April 8th 20 at 18:22
Solution
Oh, just have a very strange dance with attaching events.

Get your
document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);


And put instead:
document.getElementById('textArea').addEventListener("input", updateSize);


And will work as you need.

Then try to type any text, not beating it with a space (just press the symbol and will be surprised that everything is broken).
Be aware that the only adequate way to calculate the new required height of the textarea is to copy it somewhere "out of bounds" together with the content and learn scrollHeight.

Hold an example:

Tell me, please, why such an effect when a css style is appended to #the textArea of the parent element #main, you get a strange effect.

PS. It is clear that this is unnecessary, as this id, but just wondering.
https://codepen.io/workcode/pen/yLNZzZp

- Shania15 commented on April 8th 20 at 18:25
@Shania15, because the appearance of the textarea in this case, the context-dependent parent (fonts, sizes, spacing), and the cloned element connects to the body, thus the style #main #textarea - it does not work, and dimensions are computed as if no styles.
In principle, you can replace the document.body on target.parentNode - will work. Probably even better in General. Although the normal structure (the same BEM) with such problems you will never face. - Demetris.V commented on April 8th 20 at 18:28

Find more questions by tags CSSJavaScript