A textarea jumps after you change its text from code and restore the selection

Symptom

An editor lets the user select a passage and run an action on it (rewrite, shorten, replace). Your code swaps the selected text for the new one and selects the new passage so the user sees what changed. Every time, the view jumps — to the end of the document, or the page scrolls so the textarea's top edge is at the screen top. When you stream the new text in chunks, it jumps with every chunk.

Cause

• HTMLElement.focus() without options scrolls the nearest scrolling ancestor so the element is in view.
• In Chromium (our observation; the MDN page for setSelectionRange() does not mention scrolling), setSelectionRange() scrolls the textarea's own content so the selection end (the caret) is visible.
• Putting the saved scrollTop back also undoes any other scroll change made by the text replacement itself.

Fix

export function selectKeepingScroll(ta: HTMLTextAreaElement, start: number, end: number): void {
  const top = ta.scrollTop;
  try { ta.focus({ preventScroll: true }); } catch { /* focus is a convenience */ }
  try { ta.setSelectionRange(start, end); } catch { /* highlight only */ }
  ta.scrollTop = top;
}

When the text arrives in chunks, do not restore the selection after every chunk. Mark the changing passage some other way (an overlay behind the textarea) and set the selection once, at the end.

Related

• window.scrollTo does nothing in an SPFx web part on a modern page