Как доработать авто увеличение textarea?

Question

[WebDev]

Пытаюсь сделать текстовое поле, которое само увеличивается при вставке в него текста.
В целом работает, но есть один нюанс, а именно дефолтная высота textarea. Она больше, чем мне нужно. По дизайну это должна быть полоска в 28 пикселей. Но если я задам изначальную высоту, то при работе скрипта, если поле очистить, высота выставится auto и будет больше 28 пикселей. И еще у меня вопрос, почему в этом скрипте (я его нагуглил), используется setTimeout(() => {}, 0)? Понимаю, что это запускает скрипт внутри асинхронно, но зачем? Если этот setTimeout убрать, то скрипт работает криво.
Как уменьшить высоту поля?
Помогите, пожалуйста.

<style>
textarea{  
	overflow:hidden;
	padding:10px;
	width:250px;
	font-size:14px;
	margin:50px auto;
	display:block;
	border:1px solid #dedede;
	border-radius: 4px;
        box-sizing: content-box;
        outline: none;
}
</style>
<textarea></textarea>

<script>
window.onload = function() {

  let textarea = document.querySelector('textarea');

  textarea.addEventListener('keydown', autosize);
	             
  function autosize() {
	  setTimeout(function(){
		  textarea.style.height = 'auto';
      textarea.style.padding = '0';

			textarea.style.height = textarea.scrollHeight + 'px';
			textarea.style.padding = '10px';
    }, 0);
  }
}
</script>

Ссылка на Codepen.

Answer 1

[Dima Polos]

Видимо таймаут чтобы отловить задержку нажатия клавиш и чуть позже поменять стили.
Я убрал таймаут, и подвесил все это на событие input, хотя, как по мне, то производительнее будет на change, anyways, look:
https://codepen.io/dimovich85/pen/vbmzXb

Comments

[WebDev]

А как быть с высотой?

[Dima Polos]

WebDev, а что не так?
Сначала она маленькая, потом вставляешь текст - увеличивается, если все удалить - снова как была.

[WebDev]

Dima Polos, да, а вы попробуйте установить height:20px текстовому полю. У меня вот, например, в макете так. В этом случае увеличиваться будет корректно, а уменьшаться нет.

Answer 2

[Амир Алимжанов]

Как вариант