Auto Growing text-area [Stimulus] [Rails]

_form.html.erb

<%= text_area_tag :name, content, data: { controller: 'autogrow', action: 'autogrow#resize' } %>

auto-grow-textarea_controller.js

// Autogrow textarea as text changes
// 
// Usage <%= text_area_tag :name, content, data: { controller: 'autogrow', action: 'autogrow#resize' } %>

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    this.setStyles({
      resize: 'none',
      overflow: 'hidden'
    })
    this.resize()
  }

  resize(){
    this.setStyles({height: '5px'}) // Force textarea to shrink back to its minimum height
    this.setStyles({height: this.scrollHeight})
  }

  get scrollHeight() {
    return this.element.scrollHeight + 'px'
  }

  setStyles(styles) {
    for (var property in styles) {
      this.element.style[property] = styles[property]
    }
  }
}

Forked to simplify HTML by setting all data attributes on the textarea.
JS code also made DRYer by adding a scrollHeight getter and a setStyle method.

Updated to use this.element instead of specifying a target, and shortening data-action because input is the default event on textareas and inputs (documentation).