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);