fix: update text-area height on resize (#6840) (#6844)

packages/text-area/src/vaadin-text-area.js

@@ -210,6 +210,7 @@ export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableM
    * @override
    */
   _onResize() {
+    this._updateHeight();
     this.__scrollPositionUpdated();
   }
 

packages/text-area/test/text-area.test.js

@@ -4,6 +4,26 @@ import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../src/vaadin-text-area.js';
 
+/**
+ * Resolves once the function is invoked on the given object.
+ */
+function onceInvoked(object, functionName) {
+  return new Promise((resolve) => {
+    sinon.replace(object, functionName, (...args) => {
+      sinon.restore();
+      object[functionName](...args);
+      resolve();
+    });
+  });
+}
+
+/**
+ * Resolves once the ResizeObserver has processed a resize.
+ */
+async function onceResized(element) {
+  await onceInvoked(element, '_onResize');
+}
+
 describe('text-area', () => {
   let textArea;
 
@@ -267,6 +287,21 @@ describe('text-area', () => {
       expect(textArea.clientHeight).to.equal(height);
     });
 
+    it('should change height automatically on width change', async () => {
+      // Make the textarea wide and fill it with text
+      textArea.style.width = '800px';
+      textArea.value = Array(400).join('400');
+      await nextFrame();
+      const height = textArea.offsetHeight;
+
+      // Decrease the width
+      textArea.style.width = '400px';
+      await onceResized(textArea);
+
+      // Expect the height to have increased
+      expect(textArea.offsetHeight).to.be.above(height);
+    });
+
     it('should have the correct width', () => {
       textArea.style.width = '300px';
       expect(native.clientWidth).to.equal(