fix(textarea): allow row and expandable props to be used together

Fixes: #4959
Sage · Mar 22, 2022 · a9b64ca · a9b64ca
1 parent 900827a
commit a9b64ca
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 6 deletions.
diff --git a/cypress/fixtures/commonComponents/textarea.json b/cypress/fixtures/commonComponents/textarea.json
@@ -1,10 +1,14 @@
-{ 
+{
   "expandable": {
     "expandable": true
   },
   "expandableFalse": {
     "expandable": false
   },
+  "expandableWithRows": {
+    "expandable": true,
+    "rows": 7
+  },
   "cols1": {
     "cols": 1
   },
@@ -149,4 +153,4 @@
     "characterLimit": 5,
     "enforceCharacterLimit": false
   }
-}
+}
diff --git a/cypress/integration/common/textarea.feature b/cypress/integration/common/textarea.feature
@@ -39,6 +39,16 @@ Feature: Textarea component
       | 100  | rows100      |
       | 300  | rows300      |
 
+  @positive
+  Scenario Outline: Set expandable and rows to <rows> 
+    When I open default "Textarea Test" component with "textarea" json from "commonComponents" using "<nameOfObject>" object name
+    Then rows is set to "<rows>"
+      And Textarea height is "119px"
+    Examples:
+      | rows | nameOfObject       |
+      | 7    | expandableWithRows |
+
+
   @positive
   Scenario Outline: Set placeholder to <placeholder>
     When I open default "Textarea Test" component with "textarea" json from "commonComponents" using "<nameOfObject>" object name

diff --git a/cypress/support/step-definitions/text-area-steps.js b/cypress/support/step-definitions/text-area-steps.js
@@ -12,6 +12,10 @@ Then("Textarea component is not expandable", () => {
   textareaChildren().should("not.have.css", "height", "85px");
 });
 
+Then("Textarea height is {string}", (height) => {
+  textareaChildren().should("have.css", "height", height);
+});
+
 Then("cols is set to {string}", (colsValue) => {
   textareaChildren().should("have.attr", "cols", colsValue);
 });

diff --git a/src/components/textarea/textarea.component.js b/src/components/textarea/textarea.component.js
@@ -10,7 +10,7 @@ import { InputBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
-import StyledTextarea from "./textarea.style";
+import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import LocaleContext from "../../__internal__/i18n-context";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
@@ -72,13 +72,12 @@ const Textarea = ({
 
   const inputRef = useRef();
 
-  const minHeight = useRef(0);
+  const minHeight = useRef(MIN_HEIGHT);
 
   const expandTextarea = () => {
     const textarea = inputRef.current;
 
     if (textarea.scrollHeight > minHeight.current) {
-      // Reset height to zero - IE specific
       textarea.style.height = "0px";
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(
@@ -103,6 +102,12 @@ const Textarea = ({
     fieldHelp,
   });
 
+  useEffect(() => {
+    if (rows) {
+      minHeight.current = inputRef.current.scrollHeight;
+    }
+  }, [rows]);
+
   useEffect(() => {
     if (expandable) {
       expandTextarea();

diff --git a/src/components/textarea/textarea.style.js b/src/components/textarea/textarea.style.js
@@ -6,12 +6,14 @@ import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
 
+export const MIN_HEIGHT = 40;
+
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
     resize: none;
-    min-height: 40px;
+    min-height: ${MIN_HEIGHT}px;
     margin-top: 5px;
     margin-bottom: 5px;
   }