feat(VTextarea): add max-height prop (#22286)

resolves #22284

Author: J-Sek

packages/api-generator/src/locale/en/VTextarea.json

@@ -7,6 +7,7 @@
     "prefix": "Displays prefix text.",
     "rows": "Default row count.",
     "suffix": "Displays suffix text.",
+    "maxHeight": "Alternative for **max-rows**. Specifies the maximum height in pixels (including the field padding) for **auto-grow**.",
     "maxRows": "Specifies the maximum number of rows for **auto-grow**.",
     "autofocus": "The element should be focused as soon as the page loads."
   },

packages/docs/src/data/new-in.json

@@ -291,6 +291,11 @@
       "prev": "3.11.0"
     }
   },
+  "VTextarea": {
+    "props": {
+      "maxHeight": "3.11.0"
+    }
+  },
   "VTextField": {
     "props": {
       "autocomplete": "3.10.0"

packages/docs/src/examples/v-textarea/prop-auto-grow.vue

@@ -1,11 +1,32 @@
 <template>
-  <v-container fluid>
+  <v-container class="d-flex ga-3 align-start" fluid>
     <v-textarea
-      label="Label"
-      model-value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
-      name="input-7-1"
-      variant="filled"
+      v-model="text"
+      hint="Growing without limit"
       auto-grow
+      persistent-hint
+    ></v-textarea>
+
+    <v-textarea
+      v-model="text"
+      hint="Growing up to 7 rows"
+      max-rows="7"
+      auto-grow
+      persistent-hint
+    ></v-textarea>
+
+    <v-textarea
+      v-model="text"
+      hint="Growing up to 300px"
+      max-height="300"
+      auto-grow
+      persistent-hint
     ></v-textarea>
   </v-container>
 </template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const text = ref('The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.')
+</script>

packages/vuetify/src/components/VTextarea/VTextarea.sass

@@ -6,13 +6,17 @@
 
 @include tools.layer('components')
   .v-textarea
+    --v-textarea-max-height: initial
+
     .v-field
       --v-textarea-control-height: var(--v-input-control-height)
 
     .v-field__field
       --v-input-control-height: var(--v-textarea-control-height)
 
     .v-field__input
+      max-height: var(--v-textarea-max-height)
+
       $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
       $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
       $c: calc(100% - var(--v-textarea-scroll-bar-width, 16px))

packages/vuetify/src/components/VTextarea/VTextarea.tsx

@@ -44,6 +44,10 @@ export const makeVTextareaProps = propsFactory({
     default: 5,
     validator: (v: any) => !isNaN(parseFloat(v)),
   },
+  maxHeight: {
+    type: [Number, String],
+    validator: (v: any) => !isNaN(parseFloat(v)),
+  },
   maxRows: {
     type: [Number, String],
     validator: (v: any) => !isNaN(parseFloat(v)),
@@ -188,7 +192,11 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
           parseFloat(props.rows) * lineHeight + padding,
           parseFloat(fieldStyle.getPropertyValue('--v-input-control-height'))
         )
-        const maxHeight = parseFloat(props.maxRows!) * lineHeight + padding || Infinity
+
+        const maxHeight = props.maxHeight
+          ? parseFloat(props.maxHeight!)
+          : parseFloat(props.maxRows!) * lineHeight + padding || Infinity
+
         const newHeight = clamp(height ?? 0, minHeight, maxHeight)
         rows.value = Math.floor((newHeight - padding) / lineHeight)
 
@@ -199,6 +207,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
     onMounted(calculateInputHeight)
     watch(model, calculateInputHeight)
     watch(() => props.rows, calculateInputHeight)
+    watch(() => props.maxHeight, calculateInputHeight)
     watch(() => props.maxRows, calculateInputHeight)
     watch(() => props.density, calculateInputHeight)
     watch(rows, val => {
@@ -247,6 +256,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
           ]}
           style={[
             {
+              '--v-textarea-max-height': props.maxHeight ? convertToUnit(props.maxHeight) : undefined,
               '--v-textarea-scroll-bar-width': convertToUnit(scrollbarWidth.value),
             },
             props.style,