TextArea AutoGrow Hack

by CodeVirtue

HTML

<link rel="stylesheet" href="https://unpkg.com/vuetify@2.4.3/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.4.3/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <div ref="container">
      <v-textarea :value="longText"
                  label="Text"
                  rows="1"
                  auto-grow
                  filled
                  hide-details
                  class="ma-4"
                  ref="textarea"              
                  v-resize="onWindowResized"></v-textarea>
    </div>
  </v-app>
</div>

JavaScript

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    textareaWidth: undefined,
  	longText: [...Array(26)].map((el, i) => String.fromCharCode(97 + i).repeat(10)).join(' ')
  },
  methods: {
    onWindowResized() {
      let textareaWidth = this.$refs.container && this.$refs.container.offsetWidth;
      if (textareaWidth !== this.textareaWidth) {
        this.textareaWidth = textareaWidth;
        this.$refs.textarea.calculateInputHeight();
      }
    }
  }
})