[base-ui][TextareaAutosize] Fix resizing instability (@ZeeshanTamboli)…

… (#42030)

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>

packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx

@@ -65,6 +65,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
   const handleRef = useForkRef(forwardedRef, inputRef);
+  const heightRef = React.useRef<number | null>(null);
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
 
   const calculateTextareaStyles = React.useCallback(() => {
@@ -130,8 +131,12 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
       return;
     }
 
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
     const input = inputRef.current!;
-    input.style.height = `${textareaStyles.outerHeightStyle}px`;
+    if (heightRef.current !== outerHeightStyle) {
+      heightRef.current = outerHeightStyle;
+      input.style.height = `${outerHeightStyle}px`;
+    }
     input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
 

test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@mui/base/TextareaAutosize';
+
+function BasicTextareaAutosize() {
+  return <TextareaAutosize data-testid="textarea" />;
+}
+
+export default BasicTextareaAutosize;

test/e2e/index.test.ts

@@ -276,6 +276,38 @@ describe('e2e', () => {
 
       expect(pageErrors.length).to.equal(0);
     });
+
+    it('should not glitch when resizing', async () => {
+      await renderFixture('TextareaAutosize/BasicTextareaAutosize');
+
+      const textarea = await screen.getByTestId('textarea')!;
+
+      // Get the element's dimensions
+      const { x, y, width, height } = (await textarea.boundingBox())!;
+
+      // Calculate coordinates of bottom-right corner
+      const bottomRightX = x + width;
+      const bottomRightY = y + height;
+
+      // Get the initial height of textarea as a number
+      const initialHeight = await textarea.evaluate((textareaElement) =>
+        parseFloat(textareaElement.style.height),
+      );
+
+      // Move the mouse to the bottom-right corner, adjusting slightly to grab the resize handle
+      await page.mouse.move(bottomRightX - 5, bottomRightY - 5);
+
+      // Hold the mouse down without releasing the mouse button (mouseup) to grab the resize handle
+      await page.mouse.down();
+
+      // Move the mouse to resize the textarea
+      await page.mouse.move(bottomRightX + 50, bottomRightY + 50);
+
+      // Assert that the textarea height has increased after resizing
+      expect(
+        await textarea.evaluate((textareaElement) => parseFloat(textareaElement.style.height)),
+      ).to.be.greaterThan(initialHeight);
+    });
   });
 
   describe('<TextField />', () => {