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

@@ -4,14 +4,15 @@ 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 +203,49 @@ export const InScrollableContainer = () => {
  </Dialog>
  );
 };
+
+export const WithExpandableAndRows = () => {
+ const defaultOpenState = isChromatic();
+
+ 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.parameters = {
+ chromatic: { disableSnapshot: false },
+};

src/components/textarea/textarea.component.tsx

@@ -264,7 +264,7 @@ export const Textarea = React.forwardRef(
 
  const scrollPosition = scrollElement?.scrollTop;
 
- textarea.style.height = "0px";
+ if (!rows && expandable) textarea.style.height = "0px";
  // Set the height so all content is shown
  textarea.style.height = `${Math.max(
  textarea.scrollHeight,
@@ -275,7 +275,7 @@ export const Textarea = React.forwardRef(
  scrollElement.scrollTop = scrollPosition;
  }
  }
- }, [textareaMinHeight]);
+ }, [expandable, rows, textareaMinHeight]);
 
  const {
  labelId,

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