text with character limit html & stimulus controller

characters.html.haml

%div{data: {controller: 'text-with-limit'}}
  - limit = 1000
  %label Message:
  = form.text_area :custom_message, value: default_message, maxlength: limit, rows: 9, data: { 'text-with-limit-target': 'field', action: 'keyup->text-with-limit#updateCounter' }
  .right
    %small
      Chars left:
      %span{data: {'text-with-limit-target': 'counter'}}= limit - default_message.length
      \/
      = limit

text_with_limit_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = [ 'field', 'counter' ]

  updateCounter() {
    this.counterTarget.textContent = this.fieldTarget.maxLength - this.fieldTarget.value.length
  }

}