feat(VTextarea): add update:rows event (#21226)

closes #21133

Author: valbertVieira

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

@@ -12,7 +12,8 @@
   },
   "events": {
     "keydown": "Emitted when **any** key is pressed, textarea must be focused.",
-    "mousedown:control": "Event that is emitted when using mousedown on the main control area."
+    "mousedown:control": "Event that is emitted when using mousedown on the main control area.",
+    "update:rows": "Emitted when the number of rows changes."
   },
   "slots": {
     "counter": "Slot for the input’s counter text."

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

@@ -71,6 +71,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
     'mousedown:control': (e: MouseEvent) => true,
     'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: string) => true,
+    'update:rows': (rows: number) => true,
   },
 
   setup (props, { attrs, emit, slots }) {
@@ -180,6 +181,9 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
     watch(() => props.rows, calculateInputHeight)
     watch(() => props.maxRows, calculateInputHeight)
     watch(() => props.density, calculateInputHeight)
+    watch(rows, val => {
+      emit('update:rows', val)
+    })
 
     let observer: ResizeObserver | undefined
     watch(sizerRef, val => {

packages/vuetify/src/components/VTextarea/__tests__/VTextarea.spec.browser.tsx

@@ -54,4 +54,20 @@ describe('VTextarea', () => {
     await userEvent.keyboard('Lorem ipsum dolor sit amet consectetur adipisicing elit. ')
     await expect.poll(() => el.offsetHeight).toBe(80)
   })
+
+  it('should emit update rows', async () => {
+    await page.viewport(500, 500)
+    const model = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
+    const rows = ref(1)
+    render(() => (
+      <Application>
+        <div>
+          <VTextarea auto-grow rows="1" v-model={ model.value } onUpdate:rows={ val => { rows.value = val } } />
+        </div>
+      </Application>
+    ))
+    await userEvent.tab()
+    await userEvent.keyboard('Lorem ipsum dolor')
+    expect(rows.value).toBe(2)
+  })
 })