Merge pull request #6998 from Sage/FE-6873

fix(textarea): ensure expandable height shrinks when new lines are removed
Sage · Oct 8, 2024 · c089a91 · c089a91
2 parents 5700920 + ad93620
commit c089a91
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git 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
@@ -673,19 +673,47 @@ test.describe("Props tests for Textarea component", () => {
       await mount(<TextareaComponent expandable={expandableValue} />);
 
       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(<TextareaComponent expandable />);
+
+  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);