Почему такое «странное» поведение textarea при autoresize?

Question

[Николай]

let t = document.querySelector('textarea');
t.addEventListener('input', resize);

function resize(event) {
  const el = event.target;
  const height = event.target.scrollHeight;
  el.style.height = "auto";
  el.style.height = `${height}px`;
}

Пример поведения - https://codepen.io/bulankin/pen/NWaPoZy

При этом, если написать все тоже самое, но напрямую без переменной, то все работает нормально.

let t = document.querySelector('textarea');
t.addEventListener('input', resize);

function resize(event) {
  const el = event.target;
  el.style.height = "auto";
  el.style.height = `${event.target.scrollHeight}px`;
}

Answer 1

[ZB Venom]

Когда вы получаете значение переменной scrollHeight оно равно одному значению, а после установки el.style.height = "auto" значение scrollHeight изменяется. Если изменить последовательность получения переменной, все будет работать аналогично второму варианту:

function resize(event) {
  const el = event.target;
  el.style.height = "auto";
  const height = event.target.scrollHeight;
  el.style.height = `${height}px`;
  console.log(height)
}

Comments

[Николай]

боже, как же это логично, спасибо!