fix(textarea): ensure that correct height is applied when rows and ex…

…pandable prop are used together

This fix ensures that when the `rows` prop and `expandable` prop are used simultaneously, the
textarea component renders with the correct height.

fixes #6961

src/components/textarea/textarea-test.stories.tsx

@@ -1,17 +1,19 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from "react";
+import { StoryObj } from "@storybook/react/*";
 import Textarea, { TextareaProps } from ".";
 import Dialog from "../dialog";
 import Form from "../form";
 import Button from "../button";
+import isChromatic from "../../../.storybook/isChromatic";
 
 interface TextareaTestProps extends TextareaProps {
   labelHelp?: string;
 }
 
 export default {
   title: "Textarea/Test",
-  includeStories: ["Default", "InScrollableContainer"],
+  includeStories: ["Default", "InScrollableContainer", "WithExpandableAndRows"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -202,3 +204,57 @@ export const InScrollableContainer = () => {
     </Dialog>
   );
 };
+
+const defaultOpenState = isChromatic();
+type StoryType = StoryObj<typeof Textarea>;
+
+export const WithExpandableAndRows: StoryType = () => {
+  const [isOpen, setIsOpen] = useState(defaultOpenState);
+  const [value, setValue] = useState("Generic text");
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+      <Dialog
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        title="Title"
+        subtitle="Subtitle"
+        size="small"
+      >
+        <Form
+          stickyFooter
+          height="300px"
+          leftSideButtons={
+            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <Textarea
+            value={value}
+            onChange={({ target }) => setValue(target.value)}
+            expandable
+            rows={11}
+          />
+        </Form>
+      </Dialog>
+    </>
+  );
+};
+
+WithExpandableAndRows.storyName =
+  "With expandable and rows in a dialog with form";
+WithExpandableAndRows.decorators = [
+  (Story) => (
+    <div style={{ height: "100vh", width: "100vw" }}>
+      <Story />
+    </div>
+  ),
+];
+WithExpandableAndRows.parameters = {
+  chromatic: { disableSnapshot: false },
+};

src/components/textarea/textarea.component.tsx

@@ -264,7 +264,6 @@ export const Textarea = React.forwardRef(
 
         const scrollPosition = scrollElement?.scrollTop;
 
-        textarea.style.height = "0px";
         // Set the height so all content is shown
         textarea.style.height = `${Math.max(
           textarea.scrollHeight,

src/components/textarea/textarea.test.tsx

@@ -91,10 +91,10 @@ test("should have default min-height of 64px if no minHeight is specified", () =
 
   const textarea = screen.getByRole("textbox");
 
-  expect(textarea).toHaveStyle({ "min-height": `64px` });
+  expect(textarea).toHaveStyle({ "min-height": "64px" });
 });
 
-test("should apply the corect min-height if minHeight is specified", () => {
+test("should apply the correct min-height if minHeight is specified", () => {
   render(<Textarea minHeight={200} value="Initial content" />);
 
   const textarea = screen.getByRole("textbox");