Prevent text area with auto resize from jumping scroll position

The old logic looked like this:

```
if (this._textarea.scrollHeight > minHeight) {
  this._textarea.style.height = minHeight + 'px'
  this._textarea.style.height = this._textarea.scrollHeight + 'px'
}
```

Imagine a case where the `minHeight` is actually less than the current
height of the text area due to the current content. The height of the
element would be set to a smaller value, and then later reset to the
desired height. This causes the overall scroll height of the page to
shrink (because the text-area did), and then expand again. Now the
scroll position for the user on the page has changed, and this happens
on every keystroke.

This change just skips the first assignment to `.height`. I'm not sure why it
was initially there, but I can't see a reason for keeping it (especially
since it seems to be the cause of this bug).
This commit is contained in:
Michael Hadley 2020-03-27 11:34:00 -07:00
parent 751db493b9
commit b907c12d7a

View File

@ -47,7 +47,6 @@ CustomElement.create({
this._textarea.style.minHeight = minHeight + 'px'
this._textarea.style.transition = 'none'
if (this._textarea.scrollHeight > minHeight) {
this._textarea.style.height = minHeight + 'px'
this._textarea.style.height = this._textarea.scrollHeight + 'px'
} else {
this._textarea.style.height = minHeight + 'px'