textarea auto-resize not working properly

Question

So I have a problem with this auto-resize function I grabbed off the internet (By Adam Beres-Deak). Everything works perfectly except one small problem; say the textarea has 100 lines (or more than the page can fit) and say you go and edit something in the middle, the screen will jump all the way up to make the text RIGHT at the bottom of your browser/screen.

Example:

(function(){
    function adjustHeight(el, minHeight){
        var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
        var diff = outerHeight - el.clientHeight;
        el.style.height = 0;
        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }
        
    var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
    textAreas.forEach(function(el){
        el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
        el.style.overflow = 'hidden';
        var minHeight = el.scrollHeight;
        el.addEventListener('input', function(){
            adjustHeight(el, minHeight);
        });
        window.addEventListener('resize', function(){
            adjustHeight(el, minHeight);
        });
        adjustHeight(el, minHeight);
    });
}());

<textarea data-adaptheight rows="2" cols="40" placeholder="Your input" style="padding: 7px; line-height: 1.5;width: 100%;display: block;"></textarea>

Does anybody have any idea what can be causing this? Im not the greatest at javascript, but I did try to look it over and see what could be causing it but I had no success.

Would greatly appreciate the help guys, Thank you!

---

Answer:

After reviewing the answer on question: https://stackoverflow.com/a/18262927/13231904

I was able to merge the code from this question with the code from that answer for a very effective function:

if(window.attachEvent){
    observe = function(element, event, handler){ element.attachEvent('on'+event, handler); };
}else{
    observe = function(element, event, handler){ element.addEventListener(event, handler, false); };
}
function init(){
    var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
    textAreas.forEach(function(el){
        function resize(){
            var scrollLeft = window.pageXOffset ||
                (document.documentElement || document.body.parentNode || document.body).scrollLeft;
            var scrollTop = window.pageYOffset ||
                (document.documentElement || document.body.parentNode || document.body).scrollTop;
            el.style.resize = "none";
            el.style.overflow = 'hidden';
            el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
            el.style.height = "auto";
            el.style.height = el.scrollHeight + 'px';
            window.scrollTo(scrollLeft, scrollTop);
        }
        observe(el, 'input', resize);
        resize();
    });
}
init();

<textarea data-adaptheight style="padding: 7px;width: 100%;display: block;" rows="1" cols="40" placeholder="Your input">
</textarea>

Answer 1

The problem is this line of code:

el.style.height = 0;

It sets the height of the textarea to zero, the browser then renders the textarea to that size which reduces the height of the browser window back to the screen size making the scroll position 0, or the very top.

The code:

el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';

then resizes the textarea back to the size necessary to fit all text and scrolls the browser windows so far down to just show the current cursor position, which is why you will always be as far down as possible in the browser screen.

You can fix the problem by restoring the window scroll position to the value before the textarea's height was set to 0. See this answer for how to do that.

Answer 2

I came to the same conclusion as John Caprez, tried setting el.style.height to el.clientHeight like so:

el.style.height = el.clientHeight + 'px';

This would grow the text area but wouldn't shrink it when you removed the text.

Did some web searches and found this; ccs-tricks.com - Auto-Growing Inputs & Textareas.

It grows, shrinks and doesn't jump all over the place when you want to make edits somewhere else but the end of your text.

// Dealing with Textarea Height
function calcHeight(value, minHeight, lineHeight, padding, border) {
  let numberOfLineBreaks = (value.match(/\n/g) || []).length;
  // min-height + lines x line-height + padding + border
  let newHeight = minHeight + numberOfLineBreaks * lineHeight + padding + border;
  return newHeight;
}

let textarea = document.querySelector(".resize-ta");
textarea.addEventListener("keyup", () => {
  let style = window.getComputedStyle(textarea);
  let lineHeight = parseFloat(style.getPropertyValue('line-height'));
  let paddingTop = parseFloat(style.getPropertyValue('padding-top'));
  let paddingBottom = parseFloat(style.getPropertyValue('padding-bottom'));
  let minHeight = parseFloat(style.getPropertyValue('min-height'));
  let borderTopWidth = parseFloat(style.getPropertyValue('border-top-width'));
  let borderBottomWidth = parseFloat(style.getPropertyValue('border-top-width'));
  textarea.style.height = calcHeight(textarea.value, minHeight, lineHeight, paddingTop + paddingBottom, borderTopWidth + borderBottomWidth) + "px";
});

.resize-ta{
  font-size:16px;
  line-height:1.5; /* MUST BE EXPLICITLY SET, decimal or float */
  overflow-y:hidden;
  min-height:60px;
  padding:0;
}

<textarea class="resize-ta" placeholder="Your input"></textarea>