Repository: Sage/carbon (ts)

Issue:
Number of rows is not being applied to textarea
### Description

I am adding a number of `rows` to a `textarea` however this is not making the `textarea` bigger

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-7zwgav?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

142.9.1

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(textarea): ensure that correct height is applied when rows and expandable prop are used together - FE-6810
This fix ensures that when the `rows` prop and `expandable` prop are used simultaneously, the textarea component renders with the correct height.

fixes #6961

### Proposed behaviour

![Screenshot 2024-09-20 at 13 57 22](https://github.com/user-attachments/assets/1a557638-e50b-4cc1-9784-6dce4a17a245)

### Current behaviour

![Screenshot 2024-09-20 at 13 58 09](https://github.com/user-attachments/assets/c2fdfb64-2557-4953-8890-6a5d7f5c969c)

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [ ] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

I have opted to go with a Chromatic snapshot to cover us in the event of any regression happening and reintroducing this bug. 

### Testing instructions

- Ensure that the new Chromatic snapshot for `With expandable and rows in a dialog with form` is sufficient.
- No other visual or functional regressions with Textarea.
- No other visual or functional regressions with Textarea especially when `minHeight`, `rows` or `expandable` props are used.

Patch:
diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
index 22c5b44ff..6ad929140 100644
--- a/src/components/textarea/textarea.component.tsx
+++ b/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,


Test patch:
diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx
index 7a6212418..9c2796e85 100644
--- a/src/components/textarea/textarea-test.stories.tsx
+++ b/src/components/textarea/textarea-test.stories.tsx
@@ -1,9 +1,11 @@
 /* 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;
@@ -11,7 +13,7 @@ interface TextareaTestProps extends TextareaProps {
 
 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 },
+};
diff --git a/src/components/textarea/textarea.test.tsx b/src/components/textarea/textarea.test.tsx
index 059f8c729..02a6e8548 100644
--- a/src/components/textarea/textarea.test.tsx
+++ b/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");