Vue.js vuetify v-textarea not auto growing correctly inside v-layout that's un expanded

Question

I'd like the v-textarea to grow and shrink according to how much text is placed in it, but I'm having this issue below with a v-textarea that is inside a v-layout that is closed (not expanded).

using this

<v-flex md8 px-1 offset-md2>
   <v-textarea v-model="comments" @input="inputComments" rows="1" auto-grow :disabled="!editMode"></v-textarea>
</v-flex>

the field only shows 1 row and doesn't auto-grow. You can see the 2nd line is NOT showing completely.

and when I remove "rows="1" then this is what I see (extra white space) because the default rows is 5 for a textarea

Isn't there a way to get it to autogrow based on the lines of text or maybe re auto-grow it after it is expanded? I thought that was how it was supposed to work, but I could be wrong!

FYI - this textarea is in a hidden section, it only displays if the section is expanded. The other textareas I have on the page (not in a expanded area) show/auto-grow just fine!

Answer 1

I have had a similar problem, and solved it by setting the key attribute of the v-textarea to a variable and changing said variable manually, forcing the component to re-render. After the re-render, auto-grow worked correctly.

<template>
  <v-textarea
    :key="autoGrowHack"
    v-model="textAreaVal"
    auto-grow
  ></v-textarea>
</template>

<script>
export default {
  data() {
    return {
      autoGrowHack: false,
      textAreaVal: "lorem ipsum",
    }
  },
  methods: {
    forceReRender() {
      this.autoGrowHack = !this.autoGrowHack;
    }
  },
}
</script>

As far as when to call the forceReRender function, that's going to depend on specifics in your code. I was using this v-textarea inside a component on a v-stepper tab, and found that triggering the switch when the v-stepper's step is changed to the one with this component on it made it work.

I'm guessing this is related to the following open bug on vuetify that also relates to auto-grow: https://github.com/vuetifyjs/vuetify/issues/6995

Answer 2

I had similar issue when v-textarea with auto-grow is inside of v-expansion-panel-content

Just wrap it with v-lazy component and auto-grow should work as expected

 <v-expansion-panel-content>
    <v-lazy>
      <v-textarea
       :key="autoGrowHack"
       v-model="textAreaVal"
       auto-grow
      ></v-textarea>
   </v-lazy>
 </v-expansion-panel-content>