diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx index a66407f984ac5e..23799d01516409 100644 --- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx +++ b/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(null); const handleRef = useForkRef(forwardedRef, inputRef); + const heightRef = React.useRef(null); const shadowRef = React.useRef(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]); diff --git a/test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx b/test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx new file mode 100644 index 00000000000000..629bf7a78ca94b --- /dev/null +++ b/test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { TextareaAutosize } from '@mui/base/TextareaAutosize'; + +function BasicTextareaAutosize() { + return ; +} + +export default BasicTextareaAutosize; diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 07f138a27adc41..1d9602a987da4e 100644 --- a/test/e2e/index.test.ts +++ b/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('', () => {