Autosize Textarea

<!--
  A textarea cannot measure itself while it has a height. The two-line dance in
  resize() is the whole technique and the order is not negotiable:

    1. height = 'auto'   - collapse it so scrollHeight reports the CONTENT
    2. height = scrollHeight - grow the box to exactly that

  Skip step 1 and scrollHeight just reports the current height back at you, and
  the box never shrinks when text is deleted.
-->
<div class="grow-field">
  <label class="grow-field__label" for="grow-field-note">Message</label>
  <textarea
    class="grow-field__input"
    id="grow-field-note"
    name="note"
    rows="1"
    placeholder="Write a message…"
    aria-describedby="grow-field-note-help"
  ></textarea>
  <p class="grow-field__help" id="grow-field-note-help">The box grows as you type.</p>
</div>

<script>
  document.querySelectorAll('.grow-field__input').forEach(function (el) {
    function resize() {
      el.style.height = 'auto';
      el.style.height = el.scrollHeight + 'px';
    }

    el.addEventListener('input', resize);
    // Run once on load - the field may be server-rendered with a value already
    // in it, and a pre-filled box that starts at one row defeats the point.
    resize();
  });
</script>