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

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

@@ -64,6 +64,7 @@ export const TextAreaMixin = (superClass) =>
      * @override
      */
     _onResize() {
+      this._updateHeight();
       this.__scrollPositionUpdated();
     }
 

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

@@ -2,6 +2,26 @@ import { expect } from '@esm-bundle/chai';
 import { fire, fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 
+/**
+ * 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;
 
@@ -274,6 +294,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 nextUpdate(textArea);
+      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(