diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx index 6ad9291407..38c0139b18 100644 --- a/src/components/textarea/textarea.component.tsx +++ b/src/components/textarea/textarea.component.tsx @@ -264,6 +264,8 @@ export const Textarea = React.forwardRef( const scrollPosition = scrollElement?.scrollTop; + // Reset height to allow shrinking when lines are removed + textarea.style.height = "auto"; // Set the height so all content is shown textarea.style.height = `${Math.max( textarea.scrollHeight, diff --git a/src/components/textarea/textarea.pw.tsx b/src/components/textarea/textarea.pw.tsx index 4362a4bce8..b8ce4835cd 100644 --- a/src/components/textarea/textarea.pw.tsx +++ b/src/components/textarea/textarea.pw.tsx @@ -673,19 +673,47 @@ test.describe("Props tests for Textarea component", () => { await mount(); const textareaChildrenElement = textareaChildren(page); - await textareaChildrenElement.type("t"); + await textareaChildrenElement.press("t"); await textareaChildrenElement.press("Enter"); - await textareaChildrenElement.type("e"); + await textareaChildrenElement.press("e"); await textareaChildrenElement.press("Enter"); - await textareaChildrenElement.type("s"); + await textareaChildrenElement.press("s"); await textareaChildrenElement.press("Enter"); - await textareaChildrenElement.type("t"); + await textareaChildrenElement.press("t"); await expect(textareaChildrenElement).toHaveCSS("height", `${height}px`); }); }); }); +test(`should verify expandable Textarea shrinks back to original height when lines are removed`, async ({ + mount, + page, +}) => { + await mount(); + + const textareaChildrenElement = textareaChildren(page); + await textareaChildrenElement.press("t"); + await textareaChildrenElement.press("Enter"); + await textareaChildrenElement.press("e"); + await textareaChildrenElement.press("Enter"); + await textareaChildrenElement.press("s"); + await textareaChildrenElement.press("Enter"); + await textareaChildrenElement.press("t"); + + await expect(textareaChildrenElement).toHaveCSS("height", "92px"); + + await textareaChildrenElement.press("Backspace"); + await textareaChildrenElement.press("Backspace"); + + await expect(textareaChildrenElement).toHaveCSS("height", "75px"); + + await textareaChildrenElement.press("Backspace"); + await textareaChildrenElement.press("Backspace"); + + await expect(textareaChildrenElement).toHaveCSS("height", "64px"); +}); + test.describe("Event tests for Textarea component", () => { const inputValue = "1"; test("should call onChange callback when a type event is triggered", async ({ @@ -702,7 +730,7 @@ test.describe("Event tests for Textarea component", () => { ); const textareaChildrenElement = textareaChildren(page); - await textareaChildrenElement.type(inputValue); + await textareaChildrenElement.fill(inputValue); expect(callbackCount).toEqual(1); }); @@ -1042,7 +1070,7 @@ test("should not change the scroll position of a scrollable container when typin const textareaChildrenElement = textareaChildren(page); await textareaChildrenElement.click(); await textareaChildrenElement.press("ArrowRight"); - await textareaChildrenElement.type("foo"); + await textareaChildrenElement.press("f"); const scrollTop = await formContentElement.evaluate((el) => el.scrollTop);