From 4aa02d5e579548f64da1688ddc48fc35a2a16706 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 25 Mar 2024 17:00:38 +0530 Subject: [PATCH 1/4] fix textareaautosize resizing instability --- .../mui-base/src/TextareaAutosize/TextareaAutosize.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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]); From dd5c1ec532d5c8cb61c58151d4c1efbe4e3bcab9 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 21 Apr 2024 12:33:33 +0530 Subject: [PATCH 2/4] add e2e test --- .../BasicTextareaAutosize.tsx | 8 +++++ test/e2e/index.test.ts | 32 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx 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..fb9798477f5b16 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((event) => parseFloat(event.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); + + // Simulate a double click without releasing the mouse button (mouseup) to grab the resize handle + await page.mouse.down(); + await page.mouse.up(); + 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((event) => parseFloat(event.style.height))).to.be.greaterThan( + initialHeight, + ); + }); }); describe('', () => { From 04d1cb0b8d5c1134f3c156d89ee5b00f4943ac8c Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 25 Apr 2024 13:02:36 +0530 Subject: [PATCH 3/4] rename event to textareaElement --- test/e2e/index.test.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index fb9798477f5b16..97b83dba87d638 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -290,7 +290,9 @@ describe('e2e', () => { const bottomRightY = y + height; // Get the initial height of textarea as a number - const initialHeight = await textarea.evaluate((event) => parseFloat(event.style.height)); + 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); @@ -304,9 +306,9 @@ describe('e2e', () => { await page.mouse.move(bottomRightX + 50, bottomRightY + 50); // Assert that the textarea height has increased after resizing - expect(await textarea.evaluate((event) => parseFloat(event.style.height))).to.be.greaterThan( - initialHeight, - ); + expect( + await textarea.evaluate((textareaElement) => parseFloat(textareaElement.style.height)), + ).to.be.greaterThan(initialHeight); }); }); From 7f5f6ad861a6951955051c151567f09266810928 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 25 Apr 2024 13:31:44 +0530 Subject: [PATCH 4/4] test(e2e): use mousedown only to grab the handle --- test/e2e/index.test.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 97b83dba87d638..1d9602a987da4e 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -297,9 +297,7 @@ describe('e2e', () => { // Move the mouse to the bottom-right corner, adjusting slightly to grab the resize handle await page.mouse.move(bottomRightX - 5, bottomRightY - 5); - // Simulate a double click without releasing the mouse button (mouseup) to grab the resize handle - await page.mouse.down(); - await page.mouse.up(); + // 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