[removed] Scroll to selection after using textarea.setSelectionRange in Chrome

Question

A javascript function selects a certain word in a textarea using .setSelectionRange(). In Firefox, the textarea automatically scrolls down to show the selected text. In Chro

Answer 1

Valeriy Katkov's elegant solution works great but has two problems:

1. Does not work for long strings
2. Selected contents are scrolled to the bottom of the textarea, making it hard to see the context which surrounds the selection

Here's my improved version that works for long strings (tested with at least 50,000 words) and scroll selection to the center of the textarea:

function setSelectionRange(textarea, selectionStart, selectionEnd) {
    // First scroll selection region to view
    const fullText = textarea.value;
    textarea.value = fullText.substring(0, selectionEnd);
    // For some unknown reason, you must store the scollHeight to a variable
    // before setting the textarea value. Otherwise it won't work for long strings
    const scrollHeight = textarea.scrollHeight
    textarea.value = fullText;
    let scrollTop = scrollHeight;
    const textareaHeight = textarea.clientHeight;
    if (scrollTop > textareaHeight){
        // scroll selection to center of textarea
        scrollTop -= textareaHeight / 2;
    } else{
        scrollTop = 0;
    }
    textarea.scrollTop = scrollTop;

    // Continue to set selection range
    textarea.setSelectionRange(selectionStart, selectionEnd);
}

Works in Chrome 72, Firefox 65, Opera 58, and Edge 42

For an example of using this function, see my GitHub Project SmartTextarea.